In this small tutorial we’ll show you how can you create nice rollover buttons using CSS, which can contain text, images or both. Using text on the buttons can be important for SEO reasons, search engines give greater value to textual links.

Using text and colors only

For our first button we’ll use only text and colors for the rollover effect.

Our HTML code is quite simple:

<a href="#" class="button">Button</a>

The CSS code:

To make this link a rollover button, we’ll use the following CSS code:

a.button {
display: block;
color: #FFFFFF;
background: #000000;
width: 60px;
height: 25px;
line-height: 25px;
text-align: center;
text-decoration: none;
font-weight: bold;
border: 1px solid #000000;
}
a.button:hover {
color: #000000;
background: #FFFFFF;
}

You can see the result below:

Button

Pretty simple, isn’t it?

This entry was posted on Friday, December 29th, 2006 at 7:34 pm and is filed under CSS tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.