CSS active link

CSS active state is triggered when a link on a website is clicked. It happens just before the corresponding page is loaded and can give the user some kind of information that their link was clicked.

kettleWhen we turn on my kettle, a little light turns on to let us know that the kettle is boiling. When we turn on our TV a little click can be heard and a green light appears on the panel. This happens instantaneously and a second later the television turns on. There are many instances around your home that you will find little triggers that alert you to the fact that your action has been received.

Some appliances don't have triggers and these are usually instantaneous devices such as a light globe. Flicking a light switch triggers a light to come on instantly so no initial trigger is needed. Turning a faucet in the bathroom allows water to flow instantly and therefore no trigger is needed again.

Websites come in the first category. A link is clicked and a request is sent to the server which can take a second or two for the next page to load. Therefore a website should give some kind of information that the user has clicked the link and a new page is loading.

The active action on a link is the spot where we place this trigger. One good way of doing it is to add the following CSS to our links.

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

By adding the above CSS declaration to your links, a slight downward movement will be seen by the user.

Always give some kind of indication that a user has clicked a link on your website and the user will feel more in control which aids in usability.