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’.
Instructions
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 #466995
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
colorto#61bff9 - Remove the underline with
text-decoration: none
Now add some :active state styles for the answer class.
- Set the
background-colorto#C0D6DF - Set the text
colorto#ffffff.