CSS – Pretty Buttons

So I’ve had the need to create some buttons for a web project I’m working on.

I wanted them to be entirely CSS based, and pretty flexible with the option to add icon images.

Creating The Buttons

So I made up a button in Photoshop, I wanted them to be small, and pretty, but enough room to fit a 16×16 pixel icon on them, this is what I came up with:

Normal
Hover
Active

So, to provide myself with a button that can vary in length, I needed to split the button into 2 sections, the left section (the body of the button), and the right section (the cap). I made the body of the button as wide as the longest text + a few pixels for the icon, and the cap as small as possible;



[ad#co2]

The CSS


/* -- Default Definitions -- */
a.roundButton{ position: relative; display: block;
float: left; margin-right: 18px;

height: 22px; width: auto;
border: none; outline: none;

color: #404040;
font-size: 12px; font-weight: bold;
font-family:Arial; text-decoration: none;
text-align: center;

padding-left: 13px; padding-top: 4px;
background: url('img/roundButton_Left.png') no-repeat;
}

/* -- Button Icon --*/
a.roundButton img{
position: relative;
float: left; margin-right: 3px; margin-top: -1px;
border: 0px;
}

/* -- Button Cap --*/
a.roundButton .roundButtonR{
display: block; position: absolute; left: 100%; top: 0px;
height: 22px; width: 13px;
background: url('img/roundButton_Right.png') right no-repeat;
}


[ad#co2]

Displaying a Button

Click Me

Sure, that’s great, but I want it to be more interactive, at the moment it doesn’t have the hover / active effects.

Hovering and Clicking

/* -- Hover -- */
a.roundButton:hover {
color:#03597A;
background: url('img/roundButton_Left_hover.png') no-repeat;
}

/* -- Hover - Cap -- */
a.roundButton:hover .roundButtonR {
background: url('img/roundButton_Right_hover.png') no-repeat;
}

/* -- Active -- */
a.roundButton:active {
border: 0px; outline: none;
background: url('img/roundButton_Left_active.png') no-repeat;
}

/* -- Active - Cap -- */
a.roundButton:active .roundButtonR {
border: 0px; outline: none;
background: #F4F4F4 url('img/roundButton_Right_active.png') no-repeat;
}

Easier Use

So we’re done! The buttons scale to the length of the text and we can place nice little icons within the button using a simple img tag.

[ad#co2]

To save on putting the cap div into each button, you could use some javascript like I did with jQuery to insert it for you like so;

$(".roundButton").append("

");

Buttons in Action

Round Button Test Page

9 thoughts on “CSS – Pretty Buttons”

  1. This is a good tutorial! Real fine. There’s only one thing that could improve this piece of css. That’s using only 2 image files, one for the left side of the button and one for the right end of the button. Both of the files contain all of the including image files of one side. It will take a little bit time to load, but, it doesnt take time to load the image when you hover over or click the button ;)! Try searching this tut on good-tutorials.com, if you dont know how to do this. You said you wanted to do this on your own site, so that’s why I am trying to help you with some critic! ;)

  2. That’s not the best way to make a button, right now you have a delay when hovering… To avoid that you should have all three states in one picture, then change background (image) position accordingly to each state…

  3. Pingback: tutorialand.com
  4. Thanks for the crits :) I considered using one image and if I re-did this system I would. When using these buttons I was using a preloaded system for around 100 icons + the buttons so there was a standard loading time and no delay on the hovering etc.

    @ Raanan I don’t think I used dig over span for any particular reason. It’s quicker to write though :p

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.