Button Classes

[icecast]

hi, looking for guidance on creating custom classes for buttons. using these buttons next to each other, but having issue with button widths staying consistent on hover. wondering if i should create custom class for “trash” button, and guidance on how best to create:

<svg class=”icon-trash-bin”><use xlink:href=”#icon-trash-bin”></use></svg>

<div class=”btn-group sort_number”>

<svg class=”icon-sort-numeric-two”><use xlink:href=”#icon-sort-numeric-two”></use></svg>

</div>

[Swift Ideas – Ed]

Looks like you have a 2px border on hover, from 1px standard? Just change:

div.sort_number:hover, div.sort_title:hover, a#check-all:hover, a#check-box:hover, a#move:hover, a#resizer:hover, a#trash:hover {
background: #111;
border: 2px solid #1c2226 !important;
}

to

div.sort_number:hover, div.sort_title:hover, a#check-all:hover, a#check-box:hover, a#move:hover, a#resizer:hover, a#trash:hover {
background: #111;
border: 1px solid #1c2226 !important;
}

– Ed

[icecast]

thank you for the suggestion, unfortunately did not work – buttons slide left on hover …

[Swift Ideas – Ed]

This isn’t anything that is a standard part of the theme though.. Looks like this is custom css – and something is causing it..

Try:

a#check-all, a#check-box, a#move, a#trash, a#liker, a#recorder, a#share {
display: inline-block;
}

– Ed

[icecast]

This reply has been marked as private.

[Swift Ideas – Ed]

You’d want to use display: inline-block or floats

– Ed