Button Example With Rollover 1 In CSS

Rollover 1 CSS
For this example we must have 3 images which will work as;
Repose

On

Held down

Then in the body of our site we have this
Code:


BEGINNING

And so for all our buttons, after we are going to have to make use of CSS, we start with this code:
Code:

# bot1 {
border: 0 0 0 0;
padding: 0;
text-align: center;
}
Where we say that we do not want outer and inner margin, we align the text to the center, now we continue with this code:
Code:

# bot1 to {
background-image: url (bg_menu_1.jpg);
background-position: center top;
height: 30px;
width: 100px;
display: block;
color: # 990000;
text-decoration: none;
padding-top: 5px;
background-repeat: no-repeat;
font-weight: bold;
}
That he is practically the one who does everything, let's see line by line
background-image: url (bg_menu_1.jpg);
With this we say that we want a background image and we give the path of this
background-position: center top;
With this we are indicating that the position of the background image will be centered and upwards.
background-repeat: no-repeat;

So that the background does not repeat as if it were a pattern.
height: 30px;
width: 100;
We tell him that the height will be 30 and width 100px which are the dimensions of our background images.
display: block;
So that it generates and respects a box with the measures that we put before.
color: # 990000
With this we are only giving a color to the text that is inside our box.
text-decoration: none;
It is to avoid the line that is below the links.
padding-top: 5px;
So that I save a space of 5px in the upper part of our link and with this it lowers the position to the center of our box.
font-weight: bold;
Makes the letters bold
Then you just have to add classes for the pseudo elements "hover" and "focus"
Code:

# bot1 a: hover {
background-image: url (bg_menu_2.jpg);
}
# bot1 to: focus {
background-image: url (bg_menu_3.jpg);
}
But as we realize, we only changed the path of our background images to achieve the effect we were looking for.
The code of our rollover example in css shown below:
Code:








BEGINNING


And the images can be downloaded from this page, by right clicking on the image and saving as.