Buttons

[babyjenniferLB]

hey all i have buttons on my webpage and i want to style them but so far i can only replace the button with a still image is there no way to do it with css or at least a simple rollover.

[babyjenniferLB]

neverminds i worked it out okies dokies

[TodVader]

I know your done but I'm just curious, did you do it with a:hover ?

[babyjenniferLB]

the css
.button_submit {
width:80px;
height:20px;
background-image:url(images/buttons/btn_up.png);
background-repeat:no-repeat;
border: 0px solid;
font-size: 9pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.button_submit_hover {
width:80px;
height:20px;
background-image:url(images/buttons/btn_down.png);
background-repeat:no-repeat;
border: 0px solid;
color: #ffffff;
font-size: 9pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

in the form
<input type="submit" style="cursor: pointer" class="button_submit" onmouseover="this.className='button_submit_hover'" onmouseout="this.className='button_submit'" alt="login"/>


Some interesting points is that you must tell it

[babyjenniferLB]

the css
.button_submit {
width:80px;
height:20px;
background-image:url(images/buttons/btn_up.png);
background-repeat:no-repeat;
border: 0px solid;
font-size: 9pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.button_submit_hover {
width:80px;
height:20px;
background-image:url(images/buttons/btn_down.png);
background-repeat:no-repeat;
border: 0px solid;
color: #ffffff;
font-size: 9pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Interesting bit about the css, you must have the border set to 0px solid or you will end up with a rather ugly believed button. It also doesn't support transparency so you will need a different image button for any areas you have your button and the background is a different colour.


in the form
<input type="submit" style="cursor: pointer" class="button_submit" onmouseover="this.className='button_submit_hover'" onmouseout="this.className='button_submit'" alt="login"/>


Some interesting points is that it will take the name of the element just like a normal button, in this case submit and you don't need to do any centering or stuff like that.