Had a short quick hit on CNBC Australia yesterday – I was running soooo late!

On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. I started noticing this effect on sites of luminaries like Tim Van Damme and Andy Clarke’s sites, so credit where credit is due.

As you might imagine, it’s incredible simple. Let’s take a look.

Because we are wishing to achieve this “bump down” affect on all links and links are inline elements, margin-top won’t work. We don’t want to use padding either, because that would change the size of the box itself which might leading to shifting other elements around it as well which is undesirable. The perfect fit is position: relative, which allows us to bump around elements from their original static positioning.

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

On this site, this is a zoom-in look of the one-pixel down shift:

Subtle, but it moves.

Concerns

On this site I use it just like the code above, meaning it affects every link on the site. Some people have said it feels like overkill. Personally I like it and like the consistency, but if you are in the overkill camp (but still like it), use more specific selectors on the anchor element to use in more specific areas of your site.

More importantly, setting a different positioning value for the active state of a link is something you need to be very careful about. If you have any links on your site that are absolutely positioned, having the active state change to relative position will (probably) make them go flying away and render them unclickable. You can fix this on a case-by-case basis by making the active state of those links retain absolute positioning, and even make their top value one higher (or bottom value one lower).