CSS Button Design Patterns

CSS buttons are one of my favorite things to make. With the addition of CSS3 gradients and rounded cornors, the possibilies of what can be accomplished exploded. I’ve been working on a design pattern that makes creating buttons really simple with the least possible amount of code. Below are some examples.

The Buttons

First I always start with a base button style. Take a look through your design comps and try and pick out what all the buttons on the site have in common. Typically its a text transform, a font size, border radius, font family, border, etc. View the demo here and follow along below.

Example Output Image

HTML


<a class="button" href="#"><span>Basic Button</span></a>

CSS


a.button    { margin-bottom: 1.125em; padding: .5em 1em; display: inline-block; font-size: .75em; background: #333; color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; border-radius: 5px; border: 1px solid #666; cursor: pointer; }
a.button:hover,
a.button:focus  { background: #666; border-color: #333; }
a.button:active { border-color: orange; }

Now I know what you’re thinking… what’s with the span tag inside the button? Keep reading… they come in handy later.

Changing Colors

Changing colors of the button is easy. Now that we have a basic button down, we can add a combination of different classes to make the buttons different.

Example Output Image

HTML


<a class="button blue" href="#"><span>Basic Button</span></a>
<a class="button green" href="#"><span>Basic Button</span></a>
<a class="button yellow" href="#"><span>Basic Button</span></a>

CSS


a.blue      { background: #0c173c; border-color: #3a4773; }
a.blue:hover,
a.blue:focus    { background: #3a4773; border-color: #0c173c; }
a.blue:active   { border-color: orange; }

a.green     { background: #153c0c; border-color: #42733a; }
a.green:hover,
a.green:focus   { background: #42733a; border-color: #153c0c; }
a.green:active  { border-color: orange; }

a.yellow    { background: #c5ab31; border-color: #cbb75b; }
a.yellow:hover,
a.yellow:focus  { background: #cbb75b; border-color: #c5ab31; }
a.yellow:active { border-color: orange; }

Rapidly creating a rainbow of colors couldn’t be easier. Because we’re cascading from the basic button style, its just a matter of declaring a few new rules.

Adding Icons

Now for the fun part. What’s a button without a nice icon to go with it? Enter that span tag we added from the start. Again its just a matter of adding a few more classes and creating more rules.

Example Output Image

HTML


<a class="button blue icon icon_heart" href="#"><span>Basic Button</span></a>
<a class="button blue icon icon_remove" href="#"><span>Basic Button</span></a>
<a class="button blue icon icon_bunny" href="#"><span>Basic Button</span></a>

<a class="button green icon icon_heart" href="#"><span>Basic Button</span></a>
<a class="button green icon icon_remove" href="#"><span>Basic Button</span></a>
<a class="button green icon icon_bunny" href="#"><span>Basic Button</span></a>

<a class="button yellow icon icon_heart" href="#"><span>Basic Button</span></a>
<a class="button yellow icon icon_remove" href="#"><span>Basic Button</span></a>
<a class="button yellow icon icon_bunny" href="#"><span>Basic Button</span></a>

CSS


a.icon span         { padding-left: 1.5em; display: inline-block; background: url('../images/ui/sprite_icons.png') 0 0 no-repeat }
a.icon_remove span  { background-position: 0 -50px; }
a.icon_bunny span   { background-position: 0 -100px; }

Keeping the icons in a image sprite cuts down on HTTP requests and increases page speed. Keep adding icons to the bottom of the sprite in set increments, and you have yourself a beautiful collections of button in no time!

Now that you have the pattern down its pretty simple to scale. Want larger/smaller fonts? Add a large/small class to the buttons. This is also handy when you need to added @2x images for high res displays like the iPhone. Simply add in your media query then the only rule you’ll need to change is the a.icon span’s background image.

So what do you think? How do you setup your buttons?

posted in: Best Practices, Front End Development
tagged: , , ,

2 Comments
  1. Chris Loringer

    Hearing a front-end guy talk about how much he loves button styles is enough to make any designer like myself pumped. Nice post!

  2. Pingback: CSS Button Patterns: Picto and Icon Fonts | Pete Schuster