How do I create a Submit button mouseover?

Question

I am creating an HTML contact form that uses a standard image for a submit button.

Here is the html:

<form action="#">
    <fieldset>
        <input type="text" name="name" value="FULL NAME" onfocus="if (this.value=='FULL NAME') this.value='';"/>
        <input type="text" name="" value="PHONE NUMBER" onfocus="if (this.value=='PHONE NUMBER') this.value='';"/>
        <input type="text" name="" value="EMAIL" onfocus="if (this.value=='EMAIL') this.value='';"/>
        <input type="text" name="" value="MOVE DATE" onfocus="if (this.value=='MOVE DATE') this.value='';"/>
        <input type="text" name="" value="ORIGINATING ADDRESS" onfocus="if (this.value=='ORIGINATING ADDRESS') this.value='';"/>
        <input type="text" name="" value="DESTINATION ADDRESS" onfocus="if (this.value=='DESTINATION ADDRESS') this.value='';"/>
        <select name="type">
            <option value="Private">Private</option>
            <option value="Commercial">Commercial</option>
        </select>
        <input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" />
    </fieldset>
</form>

The static Submit button image is okay, but I would like change it on mouseover to btn_submit-over.png.

I am familiar with mouseovers useing css sprites, but they don't work for submit buttons. I would appreciate some help.

Thanks!

score 6 · Accepted Answer · answered Jul 05 '10 at 14:17

6

With pure CSS,

<input type="submit" value="::Submit Query::" id="foo" />

...

  #foo {
    background-image: url('_images/btn_submit.png');
    width: <width here>;
    height: <height here>;
    border-style: none;
    background-color: transparent;
    text-indent: 480px;    /* hack to hide the text */
  }

  #foo:hover {
    background-image: url('_images/btn_submit-over.png')
  }

If CSS is disabled it will revert to a simple submit button.

Demonstration: http://jsbin.com/aboxu3/2

You could then apply the CSS sprite techniques.

answered Jul 05 '10 at 14:17

kennytm

510,854
105
1,084
1,005

Much nicer than script. Cool site, jsbin btw – mplungjan Jul 05 '10 at 14:24
http://stackoverflow.com/questions/195632/how-to-change-input-button-image-using-css – mplungjan Jul 05 '10 at 14:26

score 3 · Answer 2 · answered Jul 05 '10 at 14:04

3

You can do this several ways... with jquery might be the best way, but this is how you do it without.

Change
<input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" />

to
<input id="quoteSubmit" type="image" src="_images/btn_submit.png" alt="" onmouseover="javascript:this.src='_images/btn_submit-over.png'" onmouseout="javascript:this.src='_images/btn_submit.png'"/>

Just from the top of my head, I guess that should work.

Br, Paul

answered Jul 05 '10 at 14:04

Paul Peelen

10,073
15
85
168

1

Highly unlikely, also no need for javascript: unless there is VBScript on the page as the first script – mplungjan Jul 05 '10 at 14:06
Drat, it actually works in FF3.6, IE8, Chrome and Safari on Windows. My apologies – mplungjan Jul 05 '10 at 14:10
@Paul: There shouldn't be the `javascript:` in the event handler. – kennytm Jul 05 '10 at 14:18
@KennyTM: Correct, but then again... it doesn't hurt either. It work both with and without. – Paul Peelen Jul 05 '10 at 14:23

Art Bibbs · Answer 3 · 2016-02-13T17:12:43.860

Classic solution (similar to Mitch's above):

For the HTML in the FORM, add a 'class':

<INPUT NAME="submit" class="submit" TYPE="submit" VALUE="Submit">

For the CSS, make hover change text color (add 'width:' and 'height:' lines if you need to)

.submit {
text-decoration: none;
text-align: center;
border: 1px solid black;
background-color: #cccccc;
-moz-border-radius: 5px; /* I hate square buttons for mozilla*/
border-radius: 5px; /* I hate square buttons for everybody else*/
font-family: Arial,Helvetic1,Geneva,Swiss,SunSans-Regular;
font-size: 18px;
color: #0000aa; /* font is blue */
}

.submit:hover {
color: #ff0000; /* font changes to RED on hover) */
}

score 1 · Answer 4 · answered May 02 '13 at 23:12

Basically this is what are you going to do:

HTML Markup:

<input type="submit" name="Submit" id="submit" value="&nbsp;" />

Notes: Create an ID for the CSS. In the "Value", put   (the html markup for a blank space) and this will make the default "value" blank.

CSS Markup:

#submit {
width: 220px; 
height: 50px;
border: none;
background: url("images/submit.jpg") no-repeat; 
}
        #submit:focus {
        background: url("images/submit_over.jpg") no-repeat;    
        }

Notes: The width and height should be the width and height of your image. Then add border: none; to remove the default border that appears.

Hope this helps! Much simpler than any of the above answers.

mplungjan · Answer 5 · 2010-07-05T14:13:56.407

1

OldSchool:

        <a href="#" onclick="document.forms[0].submit(); return false"
onmouseover="document.subBut.src=document.subBut.src.replace('.png','over.png')"
onmouseout="document.subBut.src=document.subBut.src.replace('over.png','.png')"><img 
name="subBut" src="_images/btn_submit.png" alt="" border="0" /></a>

edited Jul 05 '10 at 14:13

answered Jul 05 '10 at 14:05

mplungjan

169,008
28
173
236

score 1 · Answer 6 · answered Jul 05 '10 at 14:06

Wouldn't it be possible to use a class?

<input type="submit" class="submit" .../>

CSS:
input.submit:hover{
   color: Green;
}

or you could use then a little JavaScript to handle the swapping of images and to cause the button to call submit() (javascript:document.theform.submit())

How do I create a Submit button mouseover?

6 Answers6