Rollover button - Tutorial
Back to FAQ Home | Back to Tutorial Home
In this tutorial we are going to construct a rollover button effect that is pure CSS and no Javascript.
Roll your mouse over the links to see the effect.
Not bad Eh! The full code to achieve this is listed below and although it looks like a lot of code most of it can be copied and pasted. The routines .rollover a :link, .rollover a:visited and .rollover a:active are identical. The pseudo class link properties have been wrapped in a class called .rollover, this is to ensure that normal links in your page are not affected. First type in the code below between the <head> tags to see the effect on your own page.
<style type="text/css">
<!--
.rollover a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0000FF;
background-color: #CCCCCC;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E9E9E9;
border-right-color: #0099FF;
border-bottom-color: #0099FF;
border-left-color: #E9E9E9;
text-decoration: none;
}
.rollover a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0000FF;
background-color: #CCCCCC;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E9E9E9;
text-decoration: none;
border-right-color: #0099FF;
border-bottom-color: #0099FF;
border-left-color: #E9E9E9;
}
.rollover a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #666666;
text-decoration: none;
border-top: thin solid #0099FF;
border-right: thin solid #E9E9E9;
border-bottom: thin solid #E9E9E9;
border-left: thin solid #0099FF;
}
.rollover a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0000FF;
background-color: #CCCCCC;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E9E9E9;
border-right-color: #0099FF;
border-bottom-color: #0099FF;
border-left-color: #E9E9E9;
text-decoration: none;
}
-->
</style>
Now type the following code between the <body> tags on your page.
<p><a href="#"> Link 1 </a> <a href="#"> Link
2 </a> <a href="#"> Link 3
</a></p>
</div>
We have given the above <div> a class of rollover which means that the links in this section will be bound by the rules of the class .rollover and not subject to the normal link properties. Be careful and always check that styles are not cascading from earlier in your program. If we had left the font descriptions out from are style definitions then the rollovers would be in the standard default font. So just be aware that CSS does cascade.
Note: The non breaking spaces are required so that they pad out our box and also cause the rollover effect when the mouse is over any part of the box and not just the text.
I have kept the three routines (rollover a :link, .rollover a:visited and .rollover a:active) as mentioned above the same as I think the effect looks better, but if you want to you can change the colours on visited and active it's up to you.
The main routines are .rollover a:link and .rollover a:hover. The first one sets up the font, background and border colours and turns the underline off. Most of the code is self explanatory so just look through it and become familiar with it.
The button effect is made by colouring the top and left borders with one colour and then colouring the bottom and right borders with another shade of the same colour.
e.g.
border-right-color: #0099FF;
border-bottom-color: #0099FF;
border-left-color: #E9E9E9;
The border is set to solid and set to thin. (You can try different sizes and different types of borders, so experiment and see what effects you can achieve.)
Now we get to the important part that gives us the rollover effect. The routine .rollover a:hover changes the background colour, the text colour and swaps the borders around. By changing the top and left border colour and swapping it with the bottom and left border colour we get the effect of a button being pushed (well close anyway). At the same time we also change the background colour and also change the text colour which makes the overall effect quite effective.
That's all there is to it, have fun and experiment with different colours and borders.
