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 adding some basic styles to the answer class. Create a one-pixel, solid 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 color to #61bff9
  • Remove the underline with text-decoration: none

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

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

Sign up to start coding

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?