January 11th, 2010

Padded Links

When displaying links inline with text you want to balance readability and noticeability. An interesting way to do this is by giving it some padding and rounded corners.

a {
    padding: 2px 6px;
    text-decoration: none;
    background: #ddf;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

I would take this to the next level and make it so the padding is less visible until the mouse hovers over the link:

a {
    padding: 2px 6px;
    text-decoration: none;
    background: #ddf;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
a:hover {
    background:#bbf;
}

If you have an image as a link the code above will also apply to it and will look strange. To avoid this specify which links should have the styling or add the below to crop out the padding for images:

a img { margin: -6px; }

Overall I think this is a nice discrete effect that looks nicer than underlined links.

Based on some of the code from CSS tricks

Tags: , ,

Leave a Reply