PDA

View Full Version : styeing input submit button



Jon W
Apr 23rd, 2009, 08:22 AM
Hi, I'm working on a site right now and I wanted to give this input button some style to it. I want the image on the input to be one thing when its not hovered over and the input image to be another when someone hovers over it.

I've seen it done done before. http://answers.yahoo.com/question/ask is one of them that styles their submit button kinda like the way I want mine. Of course I'm not making mine exactly like theirs but still I want the same effect whenever hovering over the submit button.

Can this be done with CSS?


Thanks,
Jon W

abduraooft
Apr 23rd, 2009, 09:28 AM
Have a look at the article, http://stopdesign.com/archive/2009/02/04/recreating-the-button.html

Rowsdower!
Apr 23rd, 2009, 02:01 PM
You can try something like this if you want to use images:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
input#fancy_button {font-size:25px;font-weight:bold;height:110px;width:276px;background:transparent url(https://mail.google.com/mail/help/images/logo.gif) no-repeat;}
input#fancy_button:hover {background-image:url(http://www.google.com/finance/images/sp4.png);background-repeat:no-repeat;}
</style>
</head>
<body>
<input type="button" id="fancy_button" value="Button" />
</body>
</html>

And if you wanted to use what is called a 3-state image you could use a single image for regular, hovered, and active (though active doesn't register in IE but you could use the 3rd state to show current page or action if this is appropriate for your button). To do that you would use a setup like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
input#fancy_button {font-size:25px;font-weight:bold;height:30px;width:305px;background:transparent url(http://www.cssplay.co.uk/menus/tabs/tab3.gif) no-repeat 0px 0px;}
input#fancy_button:hover {background-position:0px -26px;}
input#fancy_button:active {background-position:0px -58px;}
</style>
</head>
<body>
<input type="button" id="fancy_button" value="Button" />
</body>
</html>
(image and general method borrowed from cssplay (http://www.cssplay.co.uk/menus/gif_overlap.html))