Icon Button CSS Styling Information

This information will construct on the earlier episode “CSS Button Styling Information” to discover the use case of icon buttons. We’ll cowl icon + textual content in addition to icon-only buttons.

Be aware: With SVG now having wonderful assist, the popular apply is to make use of it for icon techniques vs. icon fonts. We won’t dive into SVGs particularly, however we’ll assume SVG icons are in use.

First, let’s do the simpler lengthen from our present buttons, and drop an svg icon subsequent to the textual content:

<a href="javascript:;" class="button">
<svg
class="button__icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
Button Hyperlink
</a>

There are 3 key options concerning the SVG for the icon + textual content use case:

1. Use of a brand new button__icon class
2. The viewBox worth is tight to the icon boundaries, ideally a sq. for greatest outcomes throughout the icon set even when the values have variance (ex. 24 vs. 32)
3. For accessibility, we apply:

• aria-hidden="true" – permits assistive tech to skip the SVG because it’s ornamental and never offering any semantic worth not already supplied by the seen button textual content
• focusable="false" – prevents a “double focus” occasion in some model of IE

For extra on accessibility of icon buttons: Learn this wonderful article by Sara Soueidan who’s an skilled on each accessibility and SVGs

As a consequence of show: inline-flex utilized on the bottom .button, and no width attribute on the SVG, by default the icon shouldn’t be but seen.

So let’s first add dimensions to our new .button__icon class, utilizing the em unit to maintain it relative to the font-size in use:

.button__icon {
width: 0.9em;
top: 0.9em;
}

In keeping with the spec default, SVG components together with path have a fill of black. To regulate this, we’ll use the particular key phrase currentColor which is able to lengthen the button’s utilized textual content coloration to the SVG:

.button__icon {
fill: currentColor;
}

The very last thing to regulate is so as to add a little bit of spacing between the icon and button textual content, which we’ll once more apply utilizing the em unit:

.button__icon {
margin-right: 0.5em;
}

We have to add one utility class to permit the icon to be positioned after the textual content, or on the “finish” of the button (for right-to-left languages). We zero out the present margin, and flip it to the left:

.button__icon {
&--end {
margin-right: 0;
margin-left: 0.5em;
}
}

<a href="javascript:;" class="button">
Button Hyperlink
<svg
class="button__icon button__icon--end"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
</a>

We will make the belief that we would like each common buttons (with or with out icons) along with icon-only buttons. That is necessary as a result of we’ll reuse the .button class along with a brand new class in order that we do not have to redefine the resets and base visible kinds. The overrides are minimal.

<a href="javascript:;" class="button icon-button" aria-label="Icon-only Button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true"
class="icon-button__icon"
aria-hidden="true"
focusable="false"
>
<path
d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"
></path>
</svg>
</a>

Modifications from the icon + textual content button:

1. Addition of the icon-button class to the a
2. Addition of aria-label="Icon-only Button" to offer an accessible textual content various since we’ve eliminated the visible textual content
3. Swap of the category on the SVG to icon-button__icon

Necessary: the worth of the aria-label ought to describe what the button does not what the icon is. For additional studying and different methods to offer a textual content various, see Sara Soueidan’s article

This is what we get earlier than changes – an empty-looking button as a result of we’re again to the no-width downside:

First, let’s create our new class. As a consequence of the “C” in CSS, this rule must be positioned after the .button rule:

.icon-button {
width: 2.5rem;
top: 2.5rem;
padding: 0.35em;
border-radius: 50%;
&__icon {
width: 100%;
top: 100%;
fill: currentColor;
}
}

We outline a brand new width and top which is totally adjustable primarily based in your design necessities, however it ought to equate to a sq.. This permits creation of a “circle” look when border-radius: 50% is utilized.

Then, we add a contact of padding (once more to your tastes/design necessities) so as to add some respiratory room between the SVG icon and the button boundary.

Subsequent, we outline our icon-button__icon class. The distinction right here is that we would like the width and top to match that of the container, so we set this to 100%. This permits extending to a number of dimension icon-only buttons by solely redefining the font-size property on the .icon-button class.

This is the progress:

It is not fairly what we would like, however we are able to repair it by adjusting the next properties inside the .button class. We’ll use the :not() selector to exclude the properties meant just for common buttons:

.button {

&:not(.icon-button) {
min-width: 10ch;
min-height: 44px;
padding: 0.25em 0.75em;
}
}

Now we’ve what we’re after:

Consists of use of the .button--small class created within the earlier episode, in addition to a “actual button” to validate that kinds work simply as properly for each components:

By Stephanie Eckles (@5t3ph)

Check out ButtonBuddy to create accessible button colours. This internet app I created will assist get all of the vectors of distinction proper throughout your button coloration palette.