On Jan 6, 2006, at 1:12 PM, Conyers, Dwayne, Mr [C] wrote:
> I have a style that makes a hyperlink look like a button -- but
> have been
> using JavaScript onFocus() and onBlur() to affect button like behavior
> (i.e., a depressed and raised state). I would like to do this with
> CSS and
> would appreciate advice.
>
> The current CSS is:
>
> a.button:link, a.button:visited, a.button:hover
> {
> text-decoration:none; font-variant: small-caps; border-style:
> outset; border-width: 2; padding-left: 2; padding-right: 2; padding-
> top: 0;
> padding-bottom: 0; background-color: #C0C0C0
> }
> a.button:active, a.button:focus
> {
> text-decoration:none; font-variant: small-caps; border-style: inset;
> border-width: 2; padding-left: 2; padding-right: 2; padding-top: 0;
> padding-bottom: 0; background-color: #C0C0C0
> }
Dwayne,
If you want the button to look depressed when the user clicks a link,
it looks like you're on the right track. The :active pseudo-selector
will pick out links that are currently being clicked, no Javascript
necessary. Your CSS works fine for me. I simplified it a a bit,
taking advantage of inheritance:
a.button {
text-decoration: none;
font-variant: small-caps;
border: 2px outset #999;
padding: 0 2px;
background-color: #C0C0C0;
}
a.button:active {
border-style: inset;
}
I put an example online here:
http://www.infocraft.com/examples/buttons.html
The effect works in Safari and Firefox; I didn't test elsewhere. If
there's a problem with another browser, it's most likely due to lack
of support for inset and outset borders, in which case you could set
the colors explicitly to achieve the same effect.
Cheers,
Matthew Levine (http://www.infocraft.com/)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
