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:

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