An Introduction to the Basics of Modern CSS Buttons

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 you create your 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:

[code language="css"]
.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;
}
[/code]

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.

[code language="css"]
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 */
[/code]

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.

[code language="css"]
.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;
}
[/code]

Continue reading %An Introduction to the Basics of Modern CSS Buttons%

by Jack Rometty via SitePoint