Also sprach Lauri Raittila:
URL?
Not available at the moment, sorry. But here's what I use:
a {
display:block;
width:100px;
background-color:#FFFF00;
border-top:2px solid #FFFFCC;
border-right:2px solid #999900;
border-bottom:2px solid #999900;
border-left:2px solid #FFFFCC;
padding:0px 5px 1px 5px;
}
a:hover {
background-color:#EEEE00;
border-top:2px solid #999900;
border-right:2px solid #FFFFCC;
border-bottom:2px solid #FFFFCC;
border-left:2px solid #999900;
padding:1px 6px 0px 4px;
}
The point is, the padding does not really change the layout. It just causes
the link text to be moved by one or two pixels within the "box". The sum of
top and bottom padding as well as the sum of left and right padding remain
the same. The reason why I would like this hover padding is, that the <a>
element is styled to resemble a 3D button which appears "pressed" on hover
(by inverting the border colors). But to make the effect really "3D", the
text on the button should move by one or two pixels as well.