CSS those Links
March 9, 2007
Here is a little trick which can be used to add a little life to the links or buttons on your website. It involves using a little CSS and a .gif image with some transparency. I recently used this technique on our new Basecamp integration screens in our application. See the example below:
Before: I had a link stylized using CSS to look more like a button, complete with a hover state.
After: I gave it a little something extra by adding a notch on the bottom of the button.
Creating the image
I simply create a transparent .gif with a layer that is all white except for the shape of the notch (I use white because that is the background colour of the page). Using CSS, this image is then used to sit on top of the background color allowing the background colour to show through and giving it the effect I want. Here is a zoomed in example of the image I used:
Here is the CSS:
background-position: bottom center;
padding: 5px 0 30px 0;
That’s it! You can use this technique to customize your links in your own way but thanks to using CSS they are more dynamic and you can change colours by editing one line of code. See a working example of this or you sign up for FreshBooks, login and see it in action yourself.