Submit button hover effect

[whatson]

I am trying to make a submit button with a hover effect.
I am thinking the way to do it is to set a background image, and then change the image on rollover.

I think I may need to do an a hover effect for this perhaps?

If I cant do it with a submit button, can I make a different button that will also generate the same effect as the submit button?

Is this even possible? If not do I need to use javascript? if so what script is best?

[alt131]

Hi whatson,

Changing an image on "rollover" usually means when the user "rolls over" the element with the mouse. That is the same as a hover, so yes, you would achieve a "rollover" using a hover effect. Javascript is not required for hover effects although you will find this stated in a lot of (very, very) old tutorials written when internet explorer was the only browser to support :hover, or on javascript oriented sites which prefer to use a script rather than css.

Styling form controls is tricky, as I said in my response to your post asking about styling text areas. There are a lot of sites that wrongly claim it can't be done, and propose using images or another element instead. I'd also suggest you identify the style changes you want as they may be possible without an image. The reason I say that is because form controls are an important part of the user interface. While replacing them with an image or another styled element may look super-fancy, it may also create usuability issues for users of assistive techolgy or other devices.

As I also said in the earlier post, your mileage will vary depending on what browsers you are supporting. Below is an example of what can be done to give you a taste, but like a lot of what is possible it creates usuability issues because not all browsers support all effects.

Not for live use
button {
width:140px;
border: outset #aaa;
border-radius: 15px;
background: #fff url(myimage.jpg);
font-size:150%;
line-height:160%;
font-weight:bold;
text-transform:uppercase;
color:fuchsia;
}

button:hover {
border: inset fuchsia;
/*for demo purposes only - very bad practise to make font and background the same colour*/
background: #fff url(myhoverimage.jpg);
color: #fff;
text-shadow: 0px 0px 5px fuchsia;
/* You are changing the interface, so give the user some feedback */
cursor:pointer;
}

button:active {
background-image:none;
border: outset fuchsia ;
-webkit-box-shadow: 10px 10px 5px fuchsia ;
box-shadow: 10px 10px 5px fuchsia;
}

<button name="submit" value="submit" type="submit">Submit</button>