Categories

Usable and Accessible CSS3 Buttons

Posted on: December 13, 2014 by Dimitar Ivanov

HTML

Whenever you can use <button> or <input> because they are vastly supported by old browsers, but in general you can use all standard html tags as buttons.

<button class="button">Button</button>
<input type="button" class="button" value="Input">
<a href="#" class="button" role="button" tabindex="0">Link</a>
<div class="button" role="button" tabindex="0">Div</div>

CSS

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. The :active pseudo-class applies while a button is being activated by the user. The :focus pseudo-class applies while a button has the focus (accepts keyboard or mouse events, or other forms of input).

.button {
    background-color: #7db9e8;
    background: -webkit-linear-gradient(#7db9e8, #51A1E0);
    background: linear-gradient(#7db9e8, #51A1E0);
    border: solid 1px #1E5799;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: inset 0 0 1px #fff;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: bold 14px/32px'Open Sans', sans-serif;
    height: 34px;
    outline: none;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #1E5799;
}
.button:hover {
    background-color: #51A1E0;
    background: -webkit-linear-gradient(#51A1E0, #2689D7);
    background: linear-gradient(#51A1E0, #2689D7);
    border: solid 1px #1A4B84;
    box-shadow: inset 0 0 2px #fff;
}
.button:active {
    position: relative;
    top: 1px;
}
.button:focus{
    border: solid 1px #000;
}
.button[disabled]{
    background: #ccc;
    border: solid 1px #888;
    color: #999;
    cursor: default;
    text-shadow: 1px 1px 1px #fff;
}

Demo

Usability

states
Add :hover, :active and :focus states to your button.
emphasis
Emphasis your action (primary, high-priority) buttons.
labels
Use clear button labels. You would rather use "Create Account" as label instead of using just a "Create". Basically label should represent the action of the button.

Accessibility

using the button role
To enable screen readers to recognize such an elements as buttons, you need to add ARIA role attribute with a value of button
<div role="button">CSS3 Button</div>
focusable
The tabindex attribute will make the element focusable. In our case this a <div> which act as button.
<div role="button" tabindex="0">CSS3 Button</div>
disabled
To disable a regular <button> element, add the disabled property. To disable for example <div> element which act as button, add aria-disabled state. Possible values are: true, false
<div role="button" tabindex="0" aria-disabled="true">CSS3 Button</div>
toggle
A toggle button can have two states: pressed and not pressed. So in addition add aria-pressed attribute. Possible values are: true, false and mixed.
<div role="button" tabindex="0" aria-pressed="true">CSS3 Button</div>
See also
Social sharing

For more thoughts about usability and accessibility of css buttons stay tuned at @DimitarIvanov. If you have questions about the css3 buttons, please leave a comment below. Thanks so much for reading!


3 Comments

Paul
Your buttons isn't accessible compliant. I am not sure if you are aware of what people mean by accessible as it pertains to the impaired? Just figured I would let you know as you come up in searches.
http://webaim.org/resources/contrastchecker/
Dimitar Ivanov
Hi Paul,

What do you think is wrong or missing, and how to improve the button's accessibility? Please give more details with examples.
Kris
He means that the Foreground color: #ffffff on Background color: #51a1e0 (or #7db9e8) has the wrong contrast ratio, according to the Color Contrast Checker he linked. Colorblind people may not be able to read it.

i.e #ffffff on #000000 is high-contrast and would pass.

Other than that it is great! Thank you very much

Leave a comment

Captcha