Buttons

[Cabbit]

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.

 

[Cabbit]

neverminds i worked it out okies dokies

 

[TodVader]

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

 

[Cabbit]

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

 

[Cabbit]

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.