0 Comments

Sexy Buttons with CSS3

Posted on April 18, 2010, in Tutorials

There have been a lot of tutorials recently showing how to make the “best” buttons using CSS. As good as these tutorials are, they don’t offer much in the way of flexibility when it comes to changing colours or style, as they almost always use a repeated background image for the various gradients.

Demo | Skip to code

The Webkit browsers have supported CSS3 gradients for some time now. With the release of Firefox 3.6, we can be more confident in using CSS gradients, without leaving out all of our users.

In this tutorial, we’re going to demonstrate how you can make great looking buttons using CSS3, RGBa and a bit of pure genius. Not only is this created using 100% CSS, but it allows the colour and size of the button to be changed with ease. Check it out…

The technique can easily be applied to pretty much any element. But we’ve focussed on the <a> tag for shortness.

The HTML:

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

Step 1: Positioning and sizing

We use float:left to automatically size the button according to the text inside of it.
We’re giving the outer, <a> border-radius of 5px, and the inner <span> border-radius of 4px.

a.button {
	display: block;
	float: left;
	font: 14px "Lucida Grande";
	font-weight: bold;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

And the <span>…

a.button span {
	display: block;
	padding: 4px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

Step 2: Make the button look good

First, we’ll set the color, text-shadow and border for the inner span element.
By using RGBa, we’re allowing the background colour to show through slightly.

a.button span {
	color: rgba(0,0,0,0.8);
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
	border: 1px solid rgba(255,255,255,0.3);
	border-top-color: rgba(255,255,255,0.2);
	border-bottom-color: rgba(255,255,255,0.2);
}

Step 3: The clever bit.

We’re going to set the background-color of the outer <a> first, followed by the background gradient.
The background-color can be changed, without the need to adjust the gradient each time.

a.button {
	background-color: #d93ff0 !important; /* Change the colour of the button here */

	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to(rgba(0,0,0,0.4)));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(0,0,0,0.4));
}

Step 4: The different states…

We need to add the bits for each state – a:hover and a:active.

a.button:hover {	/* BUG! - must inlude "a" before class name for gradient to work in FF */
 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.4)), to(rgba(0,0,0,0.3)));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.4), rgba(0,0,0,0.3));
}

a.button:active {
 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.2)));
 	background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
}

Step 5: Pixel perfection

Because we love pixel perfection, we’re changing the border of the inner <span> element when it is pressed (down).
We now get a subtle line below the top border when the button is indented. Looking good.

a.button:active span {
	border: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid rgba(255,255,255,0.4);
}

The Code:

If we put all the steps together we get this:
Feel free to grab it and use it as you please.

a.button {
	display: block;
	float: left;
	font: 14px "Lucida Grande";
	font-weight: bold;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.5);
}

a.button span {
	display: block;
	padding: 4px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;

	color: rgba(0,0,0,0.8);
	text-shadow: 0 1px 0 rgba(255,255,255,0.3);
	border: 1px solid rgba(255,255,255,0.3);
	border-top-color: rgba(255,255,255,0.2);
	border-bottom-color: rgba(255,255,255,0.2);
}

a.button {
	background-color: #d93ff0 !important; /* Change the colour of the button here */

	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.2)), to(rgba(0,0,0,0.4)));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.2), rgba(0,0,0,0.4));
}

a.button:hover {	/* BUG! - must inlude "a" before class name for gradient to work in FF */
 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.4)), to(rgba(0,0,0,0.3)));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.4), rgba(0,0,0,0.3));
}

a.button:active {
 	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.2)));
 	background: -moz-linear-gradient(top, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
}

a.button:active span {
	border: 1px solid rgba(255,255,255,0.2);
	border-top: 1px solid rgba(255,255,255,0.4);
}

To Sum Up…

Although this code is unsupported in everything but Firefox 3.6+, Safari and Chrome, its a really nice technique, and will provides a consistent solution.
We’d love to hear your thoughts on the technique.