Learn
Learn Links and Buttons
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 adding some basic styles to the answer class. Create a one-pixel, solid border with the color #466995

2.

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 color to #61bff9
  • Remove the underline with text-decoration: none
3.

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

  • Set the background-color to #C0D6DF
  • Set the text color to #FFFFFF.
Folder Icon

Sign up to start coding

Already have an account?