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.

Next lesson: Project: Portfolio card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies