Flat design is so-called because of its 2-D appearance. Elements appear flat on the screen, and designers must rely on other styling and signifiers to indicate clickability.
Flat design buttons commonly appear as rectangles, rounded rectangles, or circles. These shapes are used ubiquitously for button elements, so users often perceive them as buttons and expect them to be clickable.
Since there are fewer obvious signifiers surrounding buttons in a flat design, they should be visually distinct from other page elements.
In flat designs in particular, button text is very important for clarity—the possibility of user confusion is reduced by pairing buttons with specific, descriptive labels. A button with ‘Click here’ leaves many more open questions than a button that reads ‘Submit form’.
We’ve reset the button styling so that we can quickly create a flat style.
Begin by creating a
.answer ruleset, and then, add in a rule for a solid, one-pixel border with the color
Let’s add a little more visual feedback. Since the buttons are not links themselves (but are created with
<a> tags), we’ll also remove the underline.
- Set the
- Remove the underline with
Now add some
:active state styles for the
- Set the
- Set the text