HTML & CSS
Article

An Introduction to the Basics of Modern CSS Buttons

By Jack Rometty

Update (9th July 2016): This article has been updated to include <button> tags rather than anchor tags to meet modern accessibility best practices. If you are working with buttons, always stick to the <button> tag.

Buttons are one of the most important components of any web page, and they have many different states and functions that all need to correctly match previous design decisions. In this article, we are going to cover three button design mindsets, alongside CSS code and tools to help new developers create their own buttons.

Before we dive into the various button mindsets, we need to reinforce a few of the basics of CSS buttons. Knowing the ideological difference between Flat UI and Material Design doesn’t matter if you do not know which CSS components change.

Let’s quickly have a refresher on the basics of CSS buttons.

The Basics of CSS Buttons

The definition of a good button is subjective to each website, but a few non-technical standards exist:

  1. Accessibility – This is paramount. Buttons should be easily accessible to people with disabilities and older browsers. The web’s openness is beautiful, don’t ruin it with lazy CSS.
  2. Simple text – Keep text within your buttons short and simple. Users should be able to immediately understand a button’s purpose and where it will take them.

Almost all buttons you see online will use some variation of color changes, translation times, and border and shadow changes. These can be leveraged using various CSS pseudo-classes. We will focus on two of these — :hover and :active. The :hover pseudo-class defines how CSS should change when your mouse hovers over an object. :active most commonly executes between the time a user presses the mouse button and releases it.

It is possible to change the entire display of a button with pseudo-classes, but that’s not a user-friendly approach. A good strategy for beginners is to add small or simple changes to button fundamentals while keeping the button familiar. The three main fundamentals of buttons are color, shadow and translation time.

Fundamental 1 — Color

This is the most common change. We can change the color of a variety of properties, the simplest of which are the color, background-color and border properties. Before we jump into examples, let’s first focus on how to choose button colors:

  1. Color combinations – Use colors that compliment each other. Colorhexa is a great tool for finding which colors work together. If you’re still looking for colors, check out Flat UI color picker.
  2. Match your palette – It is generally a good idea to match whichever color palette you are already using. If you are still looking for a color palette, check out lolcolors.

Fundamental 2 — Shadow

box-shadow lets you add a shadow around an object. It is possible to add unique shadows to each side, this idea is leveraged by both Flat UI and Material Design. To learn more about box-shadow, check out the MDN box-shadow docs.

Fundamental 3 — Transition Duration

transition-duration lets you add a timescale to your CSS changes. A button without a transition time will change to its :hover CSS instantly, which might be off-putting to a user. Many buttons in this guide leverage translation times to feel natural.

The following example transitions a button style gently (over 0.5 seconds) on :hover:

.color-change {
  border-radius: 5px;
  font-size: 20px;
  padding: 14px 80px;
  cursor: pointer;
  color: #fff;
  background-color: #00A6FF;
  font-size: 1.5rem;
  font-family: 'Roboto';
  font-weight: 100;
  border: 1px solid #fff;
  box-shadow: 2px 2px 5px #AFE9FF;
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}

.color-change:hover {
  color: #006398;
  border: 1px solid #006398;
  box-shadow: 2px 2px 20px #AFE9FF;
}

This looks like so:

See the Pen Button with transitions by SitePoint (@SitePoint) on CodePen.

The code that runs transitions is complicated, so older browsers treat transitions a bit differently. Because of this, we need to include vendor prefixes for older browsers.

transition-duration: 0.5s /* this is standard and works on most modern browsers */
-webkit-transition-duration: 0.5s; /* helps some versions of safari, chrome, and android */
-moz-transition-duration: 0.5s; /* helps firefox */

Removing Default Button Styles

In order to take default browser styles away from <button> elements so we can give them custom styles, we include the following CSS:

button.your-button-class {
  -webkit-appearance: none;
  -moz-appearance: none;
}

However, it is best to apply this to classes on your button elements, rather than every button by default.

There are many complicated and interesting ways to modify how transition changes your CSS, this refresher has just covered the basics.

Three Styles of Buttons

1 — Simple Black and White

See the Pen Suit and Tie Button Examples by SitePoint (@SitePoint) on CodePen.

This is usually the first button I add in my side projects because its simplicity works with a huge variety of styles. This style takes advantage of the naturally perfect contrast of black and white.

The two variations are similar, so we’ll just be going through the code of the black button with a white background. To get the other button just flip every white and black.

.suit_and_tie {
  color: white;
  font-size: 20px;
  font-family: helvetica;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 20px;
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
  background-color: black;
  padding: 4px 30px;
}

.suit_and_tie:hover {
  color: black;
  background-color: white;
  transition-duration: .2s;
  -webkit-transition-duration: .2s;
  -moz-transition-duration: .2s;
}

In the styles above, you’ll see that font and background-color change during a transition-duration of .2s both ways. This is a really simple example. To build from here, you could use the colors from your favorite brands as inspiration. A good way to find brand colors like these is with BrandColors.

2 — Flat UI buttons

Flat UI focuses on minimalism and telling a big story with small motions. I usually migrate from black and white to Flat UI buttons once my projects start to take shape. Flat UI buttons are minimal enough to fit into most designs.

Let’s improve our button from earlier by adding button movement to simulate a 3D button.

See the Pen Flat UI Buttons by SitePoint (@SitePoint) on CodePen.

This example includes five buttons, but since the only change is color, we are going to focus on the first button.

.turquoise {
  margin-right: 10px;
  width: 100px;
  background: #1abc9c;
  border-bottom: #16a085 3px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  float: left;
  font-size: 12px;
  font-weight: 800;
}

.turquoise:hover {
  opacity: 0.8; 
}

.turquoise:active {
  width: 100px;
  background: #18B495;
  border-bottom: #16a085 1px solid;
  border-left: #16a085 1px solid;
  border-right: #16a085 1px solid;
  border-radius: 6px;
  text-align: center;
  color: white;
  padding: 10px;
  margin-top: 3px;
  float: left;
}

There are three states for this button, regular (no state name), :hover, and :active.

It is notable that :hover contains only a single line of code that lowers opacity. This is a useful trick that makes a button appear lighter without requiring you to find a new, actually lighter, color.

The CSS variables aren’t new, but a few are used in new ways. Instead of having border be a solid uniform line, border-bottom, border-left, and border-right are used to create a 3D depth effect.

Flat UI buttons leverage :active heavily. Two things happen when our example button becomes :active.

  1. The :border-bottom changes from 3px to 1px. This causes the shadow below the button to shrink and bring the whole button object down a couple of pixels. Though simple, this one change helps the user feel like they’re clicking the button into the page.
  2. The colors change. The background colors darken, simulating physical movement away from the user and into the page. Again, this slight change reminds the user that they are clicking a button.

Flat UI buttons value simple and minimal movements that tell big stories. Many use :border-bottom to create a shallow movement. It is worth noting that some Flat UI buttons don’t move at all and only leverage color changes.

3 — Material Design

Material Design is a design mindset that promotes cards of information with attention grabbing motions. Google designed the idea of “Material Design” and has listed three main principles on the Material Design Homepage:

  • Material is a metaphor
  • Bold, graphic, intentional
  • Motion provides meaning

To get a better idea of these three principles, let’s see Material Design in action.

See the Pen Material Design Buttons With Polymer by SitePoint (@SitePoint) on CodePen.

Note from the editor: This example does not contain a <button> tag as it follows Polymer’s default markup for buttons, however if you are implementing Polymer on a big project, it is worth exploring using buttons rather than anchor tags in your implementation. We’ll be exploring this in greater detail in a future post.

These buttons leverage two main ideas — box-shadow and Polymer.

Polymer is a framework of components and tools built to help design websites. If you are familiar with Bootstrap, Polymer is very similar. The powerful ripple affect found above is added with a single line of code.

<div class="button">
  <div class="center" fit>SUBMIT</div>
  <paper-ripple fit></paper-ripple> /*this is the line that adds a ripple effect with polymer */
</div>

<paper-ripple fit></paper-ripple> is a Polymer component. By importing Polymer at the start of our HTML, we have access to the popular framework and its components. Learn more on the Polymer project homepage.

Now that we understand what polymer is and where the ripple comes from (how it works is a story for another day), let’s talk about the CSS that helps fulfill the Material Design principles by making the buttons pop.

body {
  background-color: #f9f9f9;
  font-family: RobotoDraft, 'Helvetica Neue';
}

/* Button */
.button {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 32px;
  line-height: 32px;
  border-radius: 2px;
  font-size: 0.9em;
  background-color: #fff;
  color: #646464;
  margin: 20px 10px;
  transition: 0.2s;
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button:active {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

/* Misc */
.button.grey {
  background-color: #eee;
}
.button.blue {
  background-color: #4285f4;
  color: #fff;
}
.button.green {
  background-color: #0f9d58;
  color: #fff;
}
.center {
  text-align: center;
}

These buttons use box-shadow for a lot of their design. Let’s look into how box-shadow changes and works its magic by removing any CSS that doesn’t change:

.button {
  transition: 0.2s;
  transition-delay: 0.2s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button:active {
  transition-delay: 0s;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}

box-shadow is used to put a thin dark shadow on the left and bottom of each button. When clicked, the shadows stretch further and become less dark. This motion simulates the 3D shadow of a button that is jumping off the page towards the user. This motion is part of the Material Design style and its principles in action.

It is possible to make Material Design buttons by combining Polymer with box-shadow effects.

  • Material is a metaphor – by leveraging box-shadow we are able to simulate 3D shadows as they would appear with real world objects
  • Bold, graphic, intentional – this is more true for the bright blue and green buttons, and those fulfill this completely.
  • Motion provides meaning – With Polymer and box-shadow transitions, we can create a lot of motion when the user clicks a button.

This article covers how to make buttons with three varied design methodologies. If you want to prototype your own button designs, I recommend using the CSS3 Button Generator.

In Conclusion

Black and white buttons are foolproof and simple. Replace black and white with your brand colors for a quick button that is relevant to your site. Flat UI buttons are simple, and leverage small motions and colors to tell big stories. Material Design buttons leverage large-scale complex motions mimicking real world shadows to grab the user’s attention.

Hopefully this guide will have helped those new to CSS to understand the building blocks that make buttons so powerful and creatively widespread.

  • M S i N Lund

    So we have:

    * 3d look, where buttons looks like they stand out, and appears to be pushed in when they are clicked.

    * Flat design, where buttons looks like they stand out less, and appears to be pushed in when they are clicked.

    * Material design, where buttons looks like they stand out a bit, and appears to be pushed OUT when they are clicked.

    Seems like material design is the worsts for usability.

  • rag

    There is not a single button shown in the whole article. You use div, span, and anchor tags that have completely different semantic meaning. Surely they look like buttons, but they are NOT buttons. That means they are not accessible, and screen readers will have a hard time detecting them.

    Anchor tags and buttons exist because they are supposed to be used for different things. Anchors are for linking content, buttons are for actions. As a user I do not expect a button just to link two pages. Also I do not expect an anchor tag to trigger an action. Unexpected behavior means the UX is bad. And nobody wants that.

    • Patrick Catanzariti

      That’s actually a good point which I should have picked up on when editing this. You could substitute the anchor tags and spans and such in the examples to use other more semantic and accessible elements too. The techniques above are moreso a default pattern used in web app component frameworks (like Polymer) rather than a set ruling on how it should be done.

      For future articles we post here, I’ll aim to streamline our code examples to use buttons and accessible elements with this in mind. Or at least ensure the accessibility concerns are mentioned. Thanks for the great feedback.

  • dzstormers

    Nice Article

  • http://github.com/FezVrasta Fez Vrasta

    I would have loved to see mentions to the problems of the “ tag and the tricks to make a button_a_button, still taking advantage of flexbox and other stuff that doesn’t work with buttons (like wrapping a DIV inside a BUTTON and so on.

    • Patrick Catanzariti

      Great feedback — at the very least for the article, I’m going to be changing the examples to work with buttons.

  • http://wolstenhol.me/ Phil Wolstenholme

    This article also fails to mention :focus states for keyboard users, which is a big deal for accessibility. The focus state doesn’t have to be anything too special, usually using the same styles as :hover is a good start. You might want to make a the focus state a bit more obvious than the hover state (for example a more contrasting background colour) so that a user can easily identify which element on page is focused without the contextual clue of the mouse pointer.

    • Patrick Catanzariti

      That’s a fantastic point. Great feedback :)

  • Patrick Catanzariti

    All pretty valid feedback to be honest! Especially because it explicitly mentions accessibility as being crucial. This article isn’t the level of quality I’d like us to have here at SitePoint, so I’ll be revising it to at least include actual buttons to at least right that wrong.

  • Patrick Catanzariti

    Thanks for joining the chorus! It’s made me decide to go in and edit this article’s examples to include actual buttons. Will be editing it shortly and will be focusing pretty heavily on code example quality and accessibility in future. No more of this sort of thing on the HTML/CSS channel!

  • Patrick Catanzariti

    Thank you for the feedback, will be editing the article to right this wrong soon!

  • Ross Z-Trigger Clutterbuck

    So the article has been updated to reflect the misuse of DIV, SPAN and A. Cool. Now can we have an update that reflects actual design practices, rather than forcing other people’s designs down our throats?

    Start thinking for yourselves, designers, there’s more to life and the Web than faddy trends in UI design – do you really want your sites to look like EVERYBODY else’s?

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.