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.
Key Takeaways
- The
- Good button design should ensure accessibility, with buttons easily accessible to people with disabilities and older browsers, and feature simple text for immediate understanding of a button’s purpose.
- The three main fundamentals of button design are color, shadow, and transition time, which can be manipulated with CSS pseudo-classes like :hover and :active.
- The article provides examples of three styles of buttons: Simple Black and White, Flat UI buttons, and Material Design buttons, each with their own unique design methodologies.
- To create your own button designs, it’s recommended to use tools like the CSS3 Button Generator.
The Basics of CSS Buttons
The definition of a good button is subjective to each website, but a few non-technical standards exist:
- 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.
- 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:
- 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.
- 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
.
- The
:border-bottom
changes from3px
to1px
. 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. - 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.
Frequently Asked Questions about Modern CSS Buttons
How can I create a simple CSS button?
Creating a simple CSS button involves defining a class in your CSS file and applying it to the button element in your HTML file. For instance, you can define a .button class in your CSS file with properties such as background-color, color, border, padding, text-align, text-decoration, display, and cursor. Then, in your HTML file, you can create a button element and apply the .button class to it. This will style your button according to the properties defined in the .button class.
How can I add hover effects to CSS buttons?
Hover effects can be added to CSS buttons using the :hover pseudo-class. This pseudo-class is used to select and style an element when the user’s pointer hovers over it. For instance, you can change the background color and text color of a button when the user’s pointer hovers over it by defining these properties in the :hover pseudo-class of your button class.
How can I create CSS buttons with icons?
CSS buttons with icons can be created by using icon fonts or SVG icons. Icon fonts such as Font Awesome provide a wide range of icons that can be easily styled with CSS. To use an icon font, you need to include the icon font’s CSS file in your HTML file and then use the appropriate class for the icon you want to use. SVG icons, on the other hand, can be directly embedded in your HTML file and styled with CSS.
How can I create CSS buttons with gradients?
CSS buttons with gradients can be created using the linear-gradient() function or the radial-gradient() function. These functions are used to define a linear gradient or a radial gradient respectively. The gradient is defined by two or more color stops, which are colors that the gradient transitions between. The color stops are defined by the color and the position of the color along the gradient line.
How can I create CSS buttons with rounded corners?
CSS buttons with rounded corners can be created using the border-radius property. This property is used to define the radius of the border corners. The value of the border-radius property can be specified in pixels or as a percentage. A higher value will create more rounded corners.
How can I create CSS buttons with shadows?
CSS buttons with shadows can be created using the box-shadow property. This property is used to apply a shadow effect to an element. The box-shadow property takes several values, including the horizontal offset, vertical offset, blur radius, spread radius, and color of the shadow.
How can I create CSS buttons with transitions?
CSS buttons with transitions can be created using the transition property. This property is used to control the speed of the change from one style to another when a user hovers over a button or clicks on it. The transition property takes several values, including the property to transition, the duration of the transition, the timing function, and the delay.
How can I create CSS buttons with animations?
CSS buttons with animations can be created using the animation property and keyframes rule. The animation property is used to specify the name of the animation, the duration, the timing function, the delay, the iteration count, the direction, the fill mode, and the play state. The keyframes rule is used to specify the styles for each stage of the animation.
How can I create responsive CSS buttons?
Responsive CSS buttons can be created using media queries. Media queries are used to apply different styles for different devices or screen sizes. For instance, you can define a media query that changes the size, padding, and font size of a button for screens that are less than 600 pixels wide.
How can I create CSS buttons with different shapes?
CSS buttons with different shapes can be created using the border-radius property and the transform property. The border-radius property can be used to create circular or elliptical buttons. The transform property can be used to rotate, scale, skew, or translate a button.
Jack is a web developer and designer. He likes practicing both in his side projects. He's always on twitter as @rometty_.