CSS those Links

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:

The code
Here is the CSS:

a {
     background-color: #DCEEFF;
     background-image: url(trans-notch.gif);
     background-repeat: no-repeat;
     background-position: bottom center;
     text-decoration: none;
     text-align: center;
     width: 150px;
     padding: 5px 0 30px 0;
     display: block;
}
a:hover {
     background-color: #9FD1FF;
}

I gave the link some padding just to help position the text.  Also note that I align the background image to the bottom and in the center.  Finally I change the background colour for the hover state to give it a nice rollover effect.  You may also want to preload your image using javascript just so the image is ready to be displayed when the user opens the page.

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.