HTML & CSS

An Introduction to the Basics of Modern CSS Buttons

Jack Rometty
Share

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.