CSS – Rollover Buttons

This CSS tutorial aims to show you just what is possible with CSS, it can makes bland text links look much more attractive.

Start by pasting this into your HTML document. It is a simple text link:

<a class="button" href="http://www.codedfx.com/">Button Text Here</a>

This is basically a link with a class assigned so the CSS will know which style to apply to it. Ok, now open a Stylesheet, or make one (save a notepad file as *.css) and paste this into it:

a.button {
background: #00ff00;
border: solid 1px #009900;
border-left: solid 10px #009900;
color: #003300;
text-decoration: none;
font-family:verdana, arial, sans-serif;
padding:2px 4px 2px 4px;

This is the code for what the button looks like. The background attribute will assign the background colour, in this case, I have used bright green. The next attribute, border specifies the style (solid), thickness (1px) and colour (#009900). The next attribute, border-left, overrides the border attribute, therefore giving the left border a thicker edge. The colour attribute specifies the colour of the actual text, this shouldn’t be confused with the background colour. Text decoration specifies the style the link will be, because this is a button, I have written none, however, you are free to change it. The font-weight attribute specifies the weight of the font, to make the text stand out more, I have chosen bold. Font size should be fairly obvious. Font-family is the same as font face in HTML, the fonts must be separated by a comma, and fonts with a space must be put in “”. The padding attribute sets the space from the text to the edge of the button. I have made the left and right edges big and the top and bottom quite small, the order goes top, right, bottom, left.

Paste this code into your CSS file:

a:hover.button {
background: #ff0000;
border: solid 1px #990000;
border-left: solid 10px #990000;
color: #003300;

This is the hover for your button. The attributes will stay the same from the original, unless stated. This particular script will make the button retain it’s original values, whilst turning it red.

Last but not least, go back to your HTML document, you need to link to the stylesheet. Paste this into your HTML:

Cool, eh?

Of course, there is nothing to stop you changing these values, you could make it so the large block switches sides, so that is is on the right side when rolled over, you could make it expand, contract, or you could make it appear on top. The possibilities are endless, have fun!

If you are stuck, you can download a .zip with all the files in here.


~ by Tom Smith on January 8, 2007.

2 Responses to “CSS – Rollover Buttons”

  1. Cool i have seen this one as a Javascript but no CSS Before.

  2. te amo maryury

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: