Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Button styling

Status
Not open for further replies.

JontyMC

Programmer
Nov 26, 2001
1,276
GB
When you hover over an input type=button, you get an orange halo effect. You also get it when you've clicked the button, but in blue. How can you style these two effects?

Cheers
 
I am guessing that you are referring to something you have seen somewhere. If so, can you show us.

My further guess would be that an image with a Javascript or CSS rollover is being used in place of the submit button.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 

This effect is built into Windows XP. As soon as you override it, you lose the nice rounded buttons.

Ironically enough, this does NOT work in IE, as it does not support hover for any elements other than A elements:

Code:
<html>
<head>
	<style type="text/css">
		.myBorder {
			border: 1px solid #000000;
		}
		.myBorder:hover {
			border-color: #FF0000;
		}
		.myBorder:focus {
			border-color: #0000FF;
		}
		.myBorder:active {
			border-color: #000000;
		}
	</style>
</head>

<body>
	<form>
		<input type="button" value="Standard Button" />
		<br /><br />
		<input type="button" value="My Button" class="myBorder" />
	</form>
</body>
</html>

Hope this helps,
Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

I had a completely different mental picture!

That's the best sort of picture to have. There's no end to the stunning visual effects you can create that way ;o)

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top