Summary - Button styles
Create button styles with border and shadow properties.
Bring the button together
Combine the four tools from this group on a button: the border shorthand gives the frame, border-radius the corners, box-shadow depth and outline the focus state.
The order is: frame and rounded corners first, then shadow. That way the button looks both defined and lifted off the background. Put the focus line in a separate :focus block so it appears only when selected with the keyboard.
Exercise Write the button base
Write a declaration block for the .btn selector. Add three declarations: border: 1px solid #3366cc, border-radius: 6px and box-shadow: 0 2px 4px rgba(0,0,0,0.15).
Show example solution
/* button base */
.btn {
border: 1px solid #3366cc;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}Add the focus state
To make the button accessible, add outline in a :focus block. When the button is selected with the keyboard a clear line appears around it; without that marker the user cannot tell where they are.
If you do not want the outline glued to the border, leave a few pixels of space with outline-offset. The focus line then stays both visible and elegantly placed against the button shape.
Exercise Add a focus line to the button
Write a declaration block for the .btn:focus selector. Add the outline: 2px solid #3366cc declaration. This way a blue line appears around the button when it is selected with the keyboard.
Show example solution
/* focus line */
.btn:focus {
outline: 2px solid #3366cc;
}Test yourself
-
What is the most important thing for an accessible button?
- A visible outline on focus
- Using a very large box-shadow
- Setting border-radius to 0
- Using very vivid colors
Show answer
A visible outline on focus — Correct. A button selected by keyboard must have a visible line around it.