Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year).
Here is the holding page in all it’s glory.
One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS.
Advantages of using CSS instead of a graphic:
- Optimisation - less file size, less http requests
- Reusable - button can be used over and over again for different actions
- Flexible - the button can stretch or compact depending on length of the text
Styling the button element
I’m going to be using Firefox 3.6 for the previews below.
This is how the default button looks.
First apply some basic styling to get started.
Nothing strange or startling about these styles. This is what we have now.
Let’s add a background. Remember, we want to make the button reusable for any colour.
- Go into Photoshop and create a new image 10px x 100px
- Create a white rectangular shape that covers the top half of the canvas on a new layer
- Give that layer 30% opacity and make the background transparent
- Save that image as overlay.png
Decide what background colour you want to use and apply it to the button along with the overlay you just made.
This gives us a nice yellow background with a glossy overlay.
Now get rid of that horrible outset border. Let’s give it a fine border that matches the background colour.
border:1px solid #ffcc00;
Make your button a bit friendlier by giving it rounded corners. This is where Webkit and Mozilla browser users will take advantage, while IE browsers will be stuck with sharp corners.
Starting to look good eh? But a good designer likes to pay attention to detail.
Now finish off the button with some pixel perfect embossing. We’re going to give it a 1 pixel border and a 1 pixel inset shadow.
Notice how we’re using RGBA colours here. This allows us to apply alpha opacity to the colour. In this case, we’re giving white a 50% opacity.
Make it clickable
We know it’s a button and that it can be clicked but users might not. Change the cursor to a pointer so users know they can click it.
We now have a pretty sexy looking button. But what about a hover state?
To save us from thinking about a colour for the hover state, we can use the RGBA approach. Let’s revisit the background style. Add this after your background declaration.
Nothing changes. All we did was change it to the same colour but using RGBA.
But how for the button’s hover state, give it the same background colour but alter the opacity slightly.
This gives us a slightly different shade of background on hover, giving the user some feedback so they know they’ve hovered over a clickable button.
Put it all together
The final code.
I’ve slipped in an active state as well for the button so the user knows when they’ve clicked it.
This is how it looks in Firefox:
And this is an active preview.
Remember the button is reusable so if you apply a class to the button, e.g. class=”save”, you can apply a different colour to this button.
And you’d get something like this.
But what about Internet Explorer?
Yes, unfortunately IE users won’t get the full benefits of the sexy button. However, it doesn’t look that bad and to IE users it will seem like there is nothing wrong.
And IE6? It doesn’t support PNG transparency so you can remove the overlay background image with an IE6 conditional stylesheet.
Then in ie.css:
And there you have it. A beautifully designed button using (pretty much) only CSS.
I highly recommend you check out this great tutorial by Zurb on super awesome buttons with CSS3 and RGBA. A handy tutorial for styling reusable buttons.