Don’t just change the color of the link, provide feedback

Instead of just changing the color of your links, provide your websites’ visitors with visual feedback for their interaction.

1. Improve the contrast between background and foreground

If you have a low contrast between the link-color and the background-color (white on light-green, like in the image shown above), apply a light text-shadow to your navigation links.

The text-shadow property adds a grey drop-shadow with one pixel to the bottom relative to the text (0px on the x-axis, 1px on the y-axis, 0px blur radius and the color #555)

a:link { text-shadow: 0px 1px 0px #555; }

Note: This effect is only visible in Firefox 3.5+, Safari 3+, Opera 9+ and Chrome.

2. Highlight the state of the link

Change the color for an :hover effect, or like I did in the navigation, apply a darker and slightly bigger text-shadow to the link.

With the following CSS applied, the link has a light 3D effect, like hovering over the navigation.

a:hover { text-shadow: 1px 1px 1px #000; }

Note: this works only in Firefox 3.5+, Safari 3+ and Chrome, but neither in Internet Explorer nor Opera 9+

3. Show me the click

If it’s a link, let the link show some reaction.

Use a:active to apply a small button-style effekt to your links. As a result to the code shown below, your link will “jump” 1px below its current position.

a:active { position: relative; top: 1px; }

4. Seamless transition for links & visible states

If image 4 + 5 looks the same to you — well, that’s by intention.

The 1^st page, right after you clicked the link, but before the 2^nd page loads.

The 2^nd page after the click.

I use the same color for a:focus and a.current (whereas .current is the class applied to the current page link on the 2^nd page.

a:focus, a.current { color: #111; }

I also used it to create a seamless transition between the 1^st and the 2^nd page. Note, it’s only useful if you know, that the now current link on the 2^nd page is at the same position like the a:focus on the 1^st page, e.g. the navigation above. Also note, if it’s not obvious that the new page loaded, because of a very big header using the browsers complete viewport, this effect can be confusing. It can also be confusing if your page loads very fast or very slow.

5. The complete transition effect

If you haven’t seen a lot of changes in the images above, open my website with either Firefox 3.5, Safari 4, Chrome 2 or Opera 9+ and check the top navigation above.

Thanks to Korsti and Björn.

At least, I couldn’t break it, hope you have no chance either to break this box If you do so, please report it here.

Screenshots and download after the click.

Screenshots (listed in alphabetical order)

Click on any image to see a bigger version.

Internet Explorer 6

Internet Explorer 7

Mozilla Firefox 2

Safari 3.1

Opera 9

Download

Version 0.1: scuffproof – an unbreakable css box

This work is licensed under a Creative Commons Attribution 3.0 Unported License.