Pangeia
asked on
CSS rollover buttons
I am trying to make a rollover menu that swaps different backgrounds and changes the color of the text.
My first approach has the button looking the way I want it to with the correct image and text centered, but does not work for the rollover.
input.button {
background-image:url('imag es/stonelb lu.png');
background-position:center ;
background-repeat:no-repea t;
border:none;
width:150px;
height:42px;
color:white;
font-family:"Baskerville Old Face";
font-size:20px;
}
input.button:hover {
background-image:url('imag es/stonebl k.png');
color:olive;
}
My second approach has the rollover working, but I cannot get the text to align vertically. It wants to have the text nested at the top of the button.
p.navbuttons a {
background-image:url('imag es/stonelb lu.png');
background-position:center ;
border:none;
width:150px;
height:42px;
color:white;
font-family:"Baskerville Old Face"; vertical-align:middle;
text-align:center;
font-size:20px;
}
p.navbuttons a:hover, p.navbuttons a:active {
background-image:url('imag es/stonebl k.png');
background-position:center ;
border:none;
width:150px;
height:42px;
color:olive;
font-family:"Baskerville Old Face";
text-align:center;
}
I have tried the "vertical-align" and a couple others but it doesn't seem to really do any good. I have tried to give it a negative value to make it go below where it puts it, but it doesn't move. However if I put a positive number it will raise it to the point it is off or partially off the button.
My first approach has the button looking the way I want it to with the correct image and text centered, but does not work for the rollover.
input.button {
background-image:url('imag
background-position:center
background-repeat:no-repea
border:none;
width:150px;
height:42px;
color:white;
font-family:"Baskerville Old Face";
font-size:20px;
}
input.button:hover {
background-image:url('imag
color:olive;
}
My second approach has the rollover working, but I cannot get the text to align vertically. It wants to have the text nested at the top of the button.
p.navbuttons a {
background-image:url('imag
background-position:center
border:none;
width:150px;
height:42px;
color:white;
font-family:"Baskerville Old Face"; vertical-align:middle;
text-align:center;
font-size:20px;
}
p.navbuttons a:hover, p.navbuttons a:active {
background-image:url('imag
background-position:center
border:none;
width:150px;
height:42px;
color:olive;
font-family:"Baskerville Old Face";
text-align:center;
}
I have tried the "vertical-align" and a couple others but it doesn't seem to really do any good. I have tried to give it a negative value to make it go below where it puts it, but it doesn't move. However if I put a positive number it will raise it to the point it is off or partially off the button.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.cssmenumaker.com/horizontal_css_menu.php
hope this help