homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Submit button hover effect
whatson




msg:4463793
 5:09 am on Jun 11, 2012 (gmt 0)

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




msg:4463815
 8:40 am on Jun 11, 2012 (gmt 0)

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved