An Introduction to CSS3 – Creating a Button

This tutorial is just going to be a little tip introducing you to all the great things that CSS3 introduces. However, these things are not yet supported cross browser – Safari, Chrome and Firefox support most of the new features, Opera a few. But funnily enough IE does not, and IE versions 6 to 8 do not support any of the new code we’re going to write today. The IE9 preview introduces support, however for now you’re going to have to accept that this code will not work in IE. There are ways around this – using images as a fallback, or using Javascript. This will be covered in a later tutorial, however today we’ll only be focusing on what these new features are, not fallbacks. So, I suggest you load up the most recent versions of Safari, Chrome or Firefox and we will get going!

Set up a Link

We’re going to set up a basic link for us to transform into a nice button. No images allowed!

<a href="something.html">A Button</a>

Initial CSS

Nice and easy. I’ve also set up some basic CSS properties:

display: block;
width: 200px; height: 50px;
font-family: "Lucida Sans Unicode", Verdana;
font-size: 20px;
text-decoration: none; color: white;
text-align: center;
line-height: 50px;

You will notice I’ve set the text colour to white but no background. Don’t fret, as we’re going to do that shortly. Another neat trick is setting the height of the link to 50px but also setting the line-height to the same 50px value. This means that the text will be perfectly aligned vertically so it sits in the middle of the button.

Background Gradient

The first thing we’re going to do is add a background gradient. These are currently only supported in Safari, Chrome and Firefox 3.6+. Whilst Safari and Chrome are webkit based browsers, Firefox is not, and as such Firefox’s syntax is very different to Safari and Chromes. Eventually, once the CSS3 spec is confirmed, they will all use the same syntax, but no one knows. A very handy tool to do this is this Linear Gradient generator. There’s loads of other handy tools there which we will be mentioning in the future.

Webkit Syntax

Is like so:

background: -webkit-gradient(gradient types, start horizontal %, start vertical 0%, end horizontal % end vertical%, from(colour), to(colour));

Notice how we have to add “-webkit” to the front of the gradient code. Once everything is finalised, you wont have to, but for now we have to put up with it.
CSS3 also allows for radial gradients, however we wont be covering those today, we will be using a linear gradient. The first two percentage values decide where the gradient should start. If you’re doing a gradient from top to bottom, these will usually both be 0. The next two % values are for where the gradient should stop. A normal vertical gradient will have the values 0% 100% – that’s 0 from the left, and 100% from the top. The next two values are easy – which colour to start at, and which to end at. You can also add colour stops, which are done by adding this code after the final part of the gradient declaration:

, color-stop(.6,#333))

The .6 is how far along you wish to add the stop, the the colour is, well, the colour you want the stop to be.

We’re not using colour stops today, we’re going to create a simple orange gradient for our button, using this code:

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D9AE38), to(#D65D00));

That code is for webkit, and now we need to same code for Firefox. Lets do it.

Firefox Syntax

Firefox sadly does it all its own way.

background: -moz-linear-gradient(horiz start % vertical start% angle in deg,end colour, start colour);

For a start, this time the code is -moz-linear-gradient, not just -gradient as it is with webkit. The first value defines the horizontal position, the second % value is the vertical one. It’s not as clear cut as the webkit code, in fact, it’s hard to explain. I highly suggest you head over to the linear gradient generator using Firefox and mess around yourself. Another important note is that the colours are the reverse of what you might imagine, especially doing a linear gradient. Webkit does it going “down” whereas Firefox orders the colours going “up”. The code for our button looks like this:

background: -moz-linear-gradient(0% 75% 90deg,#D65D00, #D9AE38);

Finally, one easy fallback that takes little effort is just adding a colour. So, our final code (for Webkit/Firefox) looks like below. Other browsers will just display the colour.

background: orange -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D9AE38), to(#D65D00));
background: -moz-linear-gradient(0% 75% 90deg,#D65D00, #D9AE38);

And the results are like so:

Border Radius

The gradient code is not very easy, but border-radius (or “rounded-corners” to me and you) is much more simple. It’s like so:

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

The first two declarations are for Webkit and Firefox. The third is the generic one, which is supported by Opera. The higher the value, the more rounded the corners are. Once you’ve added those, your button should be taking shape nicely!

Box Shadow

This is supported in Safari, Chrome, Firefox and Opera but does use vendor specific declarations once more. Opera uses the default without any vendor extras.

box-shadow:horizontal offset px vertical offset px blur px #colour

Once more the same site that had the linear gradient generator has a superb resource for generating box shadows. Horizontal and vertical offsets point out how far down and across the shadow occurs on the box. The blue is simply how blurred the shadow will be, 0px gives you a very crisp shadow, whilst a higher level blurs it a lot more, almost like smudging it.

We’re trying to be slightly subtle here, so here’s the code we’re adding:

-webkit-box-shadow:2px 2px 2px #333333;
-moz-box-shadow:2px 2px 2px #333333;
box-shadow:2px 2px 2px #333333;

This is where you might see the downside of CSS3 and all these vendor declarations. There is a lot of repetition.

Now our button should look like this:

Text Shadow

Text-shadow actually existed in CSS2 but was removed in 2.1. It’s now back in CSS3 and is supported by all but IE. No vendor specific additions required and the code is really simple.

text-shadow:horiz offset px vert offset px blur px #colour;

It’s identical to the code for box-shadow. Again you can mess around with this on the same site as before, the idea here is to experiment until you get it right.

Our code looks something like this:

text-shadow:2px 1px 1px #000;

And our button is complete, and looks like so:

All Done

In future posts we’ll look at fallback solutions in browsers that do not support these new features, but for now I hope you enjoyed this little dive into CSS3. Any problems, get hold of me on twitter and feel free to ask anything.