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="#">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;
}

Pretty simple, isn’t it?