Buttons: Flat Design

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

1.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.

2. Now add some :active state styles for the answer class.

• Set the background-color to #C0D6DF

• Set the text color to #ffffff.