Creating simple pure CSS buttons

This week I played around with some pure CSS button techniques. This style of button is clean looking and easy to set up, it even has slightly rounded corners. This is not the sliding doors technique which allows you to have full rounded corners, but it a variation, a little simpler and requires only one image and one div tag in the markup. Check out the working demo and read on.

One image used twice

The trick I use is simple, place the background image twice and offset the one on top by one pixel. For a grey button, the background would look like the one below with four 1px notches out of each corner. The size of the background is just to accommodate different sized buttons, so if you needed a wider button then you would need a wider background. Also, the gradient at the bottom will depend on the font size you use and the style you are looking for.

In order to get these buttons to work in all browsers including our beloved IE6 and 7 they must all be floated left or right. If you do not need to support these browsers then you could use a display: inline-block which would make them even more flexible. Below is the CSS used to create a grey button.

.clear {
	clear:both;
}
.left {
	float:left;
}
.right {
	float:right;
}
.btn a {
	white-space: nowrap;
	text-align: center;
	display: block;
	color:#fff;
	padding:1px 20px 5px 20px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-shadow: #3a0000 1px 1px 1px;
	text-decoration: none;
	font-weight:bold;
	position: relative;
	bottom:-1px;
	right:-1px;
	z-index: 1;
}
.grey {
	background:url(images/btn_grey_bkg.png) no-repeat top left;
	margin:5px;
}
.grey a {
	background:url(images/btn_grey_bkg.png) no-repeat bottom right;
}

And here is the HTML for the actual button.

<div class="btn grey left clear">
	<a href="#">Grey</a>
</div>

How it works

As you can see the HTML snippet is very small and has several CSS classes. I like to break up my classes because I find it allows for much more flexibility. This way you can add which way you want the button to float, whether or not you want the floats to be cleared when beside other elements and what colour you would like to use. If we wanted to add red buttons we would simply create a red background and add the red CSS class.

.red {
	background:url(images/btn_red_bkg.png) no-repeat top left;
	margin:5px;
}
.red a {
	background:url(images/btn_red_bkg.png) no-repeat bottom right;
}

Followed by:

<div  class="btn red left clear">
	<a href="#">Red Button</a>
</div>

Which would give us buttons like these:

The btn class does the bulk of the work, so lets walk through it.

• First we apply all these styles to the actual link within the div, thus .btn a.
• The text align is only needed if you plan to add breaks to your buttons. One line of text will be padded and automatically be centered.
• We apply a nowarp so the text does not wrap unless you force it too. You can add an HTML breaks (<br />) in your button.
• The display: block allows you to apply padding to the top and bottom of the anchor tag which by default is inline. It also makes the entire button clickable and not just the text.
• The padding values can be tweaked to whatever you think looks good. This is where the text will situated within the button.
• font-family, font-size, text-shadow, text-decoration and font-weight are all optional and could be defined elsewhere in the CSS file. text-shadow looks great but does not work in any versions of Internet Explorer at the time of writing. Graceful degradation / progressive enhancement applies nicely.
• position: relative, allows us to offset the background image defined later in the colour class by bottom: -1px and right: -1px. This will make the background image within the colour anchor link offset so you still get the top and left sides of the bottom image.
• z-index:1 forces the the anchor tag to the top which is necessary for IE6.

Taking it further

These buttons are fairly flexible and easy to change. You could easily apply hover states and change the backgrounds. There is very little markup involved and that’s always a good thing in my books. I’m trying to move away from bulky markup with many divs. It will be nice when we can freely use multiple backgrounds on a single div and rounded corners with CSS3.

Demo

Check out the working demo and feel free to post questions.