Designing CSS Buttons

Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system.

Links vs. buttons

Before we explain how to style buttons, let’s clear up a common misconception: buttons are not links. The main purpose of a link is to navigate between pages and views, whereas buttons allow you to perform an action (such as submit a form).

In one of his articles, Jakob Nielsen writes about command links, which are a blend of links and buttons. But he recommended that command links be limited to actions with minor consequences and to secondary commands. To learn more about primary and secondary commands (and actions), check out Primary and Secondary Actions in Web Forms by Luke Wroblewski. To learn more about the differences between links and buttons, read Creating Usable Links and Buttons at UXBooth.

Basic Styling

The simplest way to style links and buttons is to add background color, padding and borders. Below are examples of the code for the link, button and input (”Submit”) elements.


<a class="button" href="#">Sample button</a>
  <button class="button" id="save">Sample button</button>
  <input class="button" value="save" type="submit">Sample button</button>


.button {
  padding:5px;
  background-color: #dcdcdc;
  border: 1px solid #666;
  color:#000;
  text-decoration:none;
}

This simple code minimizes the visual differences between links and buttons. And here are the rendered examples of the code above:

Different Buttons

The important thing to note is that these three elements render differently with the same CSS. So, you should style these elements carefully to ensure consistency across your website or application.

Images

Adding images to buttons can make the buttons more obvious. Sometimes the image itself clearly communicates the purpose of a button; e.g. a loupe icon for searching or a floppy disk icon for saving. The easiest way to add an image to a button is to use a background image and then position it accordingly. Below are our examples with a checkmark icon.

.button {
  padding: 5px 5px 5px 25px;
  border: 1px solid #666;
  color:#000;
  text-decoration:none;
  background: #dcdcdc url(icon.png) no-repeat scroll 5px center;
}

Different Buttons

Button States

In addition to their default state, buttons and links can have two other states: hover and active (i.e. pressed). It is important that buttons appear different in different states so that users are clear about what is happening. Any element in a hover state can be styled by invoking the :hover CSS pseudo-class.

a:hover {
  color:#f00;
}

Though very important, the active state is rarely implemented on websites. By showing this state, you ensure that your buttons are responsive and send a visual cue to users that a button has been pressed. This is called isomorphic correspondence, and it is “the relationship between the appearance of a visual form and a comparable human behavior” (Luke Wroblewski, Site-Seeing). The article Pressed Button State With CSS elaborates on the importance of the active state.

a:active {
  color:#f00;
}

There is yet one more state, one that is seen when navigating with the keyboard: the focus state. When the user navigates to a button using the Tab key, it should change appearance, preferably to have the same appearance as the hover state.

a:focus {
  color:#f00;
}

The examples below shows the common way to style button states. The hover state is a bit lighter than the normal state, while the active state has an inverted gradient that simulates a pressed action. Although you need not limit yourself to this styling, it is a good place to start.

Button States

We should talk about how to handle the outline property for the :active and :focus states. Handling this property well is important for the experience of users who employ the keyboard as well as the mouse. In the article Better CSS Outline Suppression,” Patrick Lauke shows how buttons and links behave in different combinations of states and explains why the outline property should be invoked only with the :active state.

Apple

The blue “Buy now” button on Apple.com has a slightly lighter background for the hover state and an inset style for active state. Even the main navigation button on Apple’s website implements all three states.

Tearoundapp

Although it doesn’t implement the active state, this fancy button on Tea Round has a nice fading effect on hover.

Uxbooth Button

The “Read more” button on UX Booth turns green on hover and moves down one pixel in the active state, which simulates the effect of pressing a button.

Useful Reading

The article Rediscovering the Button Element shows the differences between links and buttons and explains how to style buttons easily.

Rediscover Button

Styling Form Buttons covers the basics of styling buttons, with many examples.

Tyssendesign

Beautiful CSS Buttons With Icon Set shows how to style buttons using background images. Although not scalable, these are really nice buttons.

Buttonnice

Recreating the Button is a very good article that explains how Google ended up with the buttons that it uses on majority of its websites.

Stopdesign

Scalable CSS Buttons Using PNG and Background Colors explains how to create really stunning buttons for all states. Although it uses jQuery, it degrades gracefully if JavaScript is turned off.

Monc

Relation Resources

-->