Friday, February 27, 2004

Funky image link button borders in CSS

If you're using a functioning modern web browser (e.g., Mozilla, Safari,...), the graphics at the bottom of this page will "pop-up" with "3D" borders when you move the mouse cursor over them, and will "press in" with reddish "3D" borders when you press the mouse button on them.

This effect is done entirely in CSS - not JavaScript.

Basically, when an image element "img" is directly contained by an anchor (link) element "a href=...", I assign it a 2 pixel border:
a[href] > img{

margin:2px;
}
Then, for when the same image element is being "hovered" over, I drop the margin and replace it with a 2 pixel-wide border. The border is black, except for the top and left which are white - to give it that "3D" look.
a[href]:hover > img{

border:2px solid black;
border-top-color:white;
border-left-color:white;
margin:0px;
}
Finally, for when the mouse button is down (being pressed) on the image, I change the border color to a light red, with the top and left color being a dark red.
a[href]:active > img{

border:2px solid #F99;
border-top-color:#900;
border-left-color:#900;
margin:0px;
}

0 comments:

Post a Comment