# CSS Submit Button Trick no quite working on a rollover state

**URL:** <https://forum.kirupa.com/t/css-submit-button-trick-no-quite-working-on-a-rollover-state/189600>\
**Category:** Uncategorized\
**Created:** [June 4, 2006, 1:30pm UTC](https://forum.kirupa.com/t/css-submit-button-trick-no-quite-working-on-a-rollover-state/189600 "2006-06-04T13:30:15Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![trevorsaint](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/trevorsaint/32/268_2.png) [@trevorsaint](https://forum.kirupa.com/u/trevorsaint)\
**Post date:** [June 4, 2006, 1:30pm UTC](https://forum.kirupa.com/t/css-submit-button-trick-no-quite-working-on-a-rollover-state/189600/1 "2006-06-04T13:30:15Z")

</div>

Having a few slight issues when trying to apply a rollover. The code I have done below basically lets you assign a background button image as a replacement for a standard submit button.

Basically if your viewing the page without images or through a non-styled css you will find that the submit button is a standard form element, it has taken a little bit of time to get this working a treat in all browsers without problem. As below demonstrates this.

However I am really keen to assign a rollover state but am unable to do this no matter what I try, has anyone got any ideas in achiving this.

PS I want all images off page and soley used as background images. As below.

\<button id=“submit-form” type=“submit”\>Submit contact form\</button\>

#submit-form {  
display:block;  
width:100px;  
height:32px;  
margin:0;  
padding:0;  
border:0;  
text-indent: -4000px;  
background:transparent url("…/img/btn-contact-out.gif") no-repeat;  
cursor: pointer; /\* hand-shaped cursor _/  
cursor: hand; /_ for IE 5.x \*/  
}

I mean trying the standard routine still did not work i.e

#submit-form:hover {background:transparent url("…/img/btn-contact-over.gif") no-repeat;}