Grow your CSS skills. Land your dream job.

Make All Links Feel Subtly More Button-Like

Published by Chris Coyier

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, so credit where credit is due.

As you might imagine, it's incredibly 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).

Comments

  1. Hitesh
    Permalink to comment#

    Simple and Effective
    Thanks for sharing

  2. Potentially a bit weird for tabs/images but it’s certainly effective and a nice enhancement for text links. Probably good on the iPhone too

  3. Hitesh
    Permalink to comment#

    @chris

    you should insert it in snippets area.

  4. Permalink to comment#

    I love it, it’s very subtle but for some reason it feels just a bit more interactive, the very subtle movement clicks in your head.

    Thanks for sharing this.

  5. bill
    Permalink to comment#

    Feels gimmicky to me. Oh, and “As you might imagine, it’s incredible simple. ” should be “As you might imagine, it’s incredibly simple. “

    • Eric
      Permalink to comment#

      Or maybe he meant it in the sense of “wicked simple” instead of “wickedly simple”…?

    • bill
      Permalink to comment#

      After seeing this in place here for a few days, now I find this annoying and a sign of bad CSS. When I click a link and I see it jump, to me it looks like the designer mucked up something and instead of making links more usable, made then look like a mistake.

    • Oliver
      Permalink to comment#

      Oh, and “made then” should be “made them” … there is something about stones and glass houses you should maybe reflect on Billy Boy!

      I like it … especially with the underline only on hover

  6. Permalink to comment#

    I hadn’t actually noticed it before, but it is effective.

    I think it’s one of those things that doesn’t jump out at you, but adds to the experience.

    Thanks for the post.

  7. Permalink to comment#

    Right post at right time,
    today I was working on sidebar to include this effect and finally got it.
    Thanks Chris…
    :)

  8. Nice little trick that, thanks

  9. Permalink to comment#

    See, this right here is why I keep coming back. It’s all about the details, especially the subtle ones. Thanks!

  10. Great little tip. I’m so adding this to my body text!

  11. Permalink to comment#

    a great technique, will put it into practice. thanks!

  12. Permalink to comment#

    That’s the first time I’ve ever used a tip STRAIGHT away. Copy, paste, done job. Tidy little addition to the site I’m working on. Thanks greatly.

  13. Permalink to comment#

    I use it on buttons links but I don’t like it verry much on text links.

  14. Permalink to comment#

    Nice trick

  15. Permalink to comment#

    This style should be applied carefully. For links with position:absolute property, it will break the link position when clicked

  16. Permalink to comment#

    Love it! I’m trying to imagine a scenario where I’ll have a text link with position:absolute, but I certainly appreciate the heads-up from Xitong.

    The great thing about it is exactly what Chris says in the description: the subtlety. If it shifted on hover-over it might be a bit intrusive. But a quick little shift as it’s clicked? Great!

  17. Permalink to comment#

    Is there a way to “void” the active state if the user:

    -Clicks & Holds the link
    -Rolls off the link (stay on current page)

    I get stuck in the active state which isn’t huge on text links, but for buttons its pretty blatant.

  18. Eamonn
    Permalink to comment#

    I’ve just implemented this, but kept it to

    p a:active, span a:active

    to stop it from affecting anything major. Worked a treat. Ta!

  19. I guess the days of just changing color are over!

  20. Permalink to comment#

    Cool stuff, thanks. :)

  21. Permalink to comment#

    cool idea, but i noticed if u click and hold down, but move off the link, it doesnt move back up. maybe set a “top:0″ on the default state?

  22. It’s so subtle, I didn’t even notice it until I really stared, so I don’t think it’s overkill :)

  23. Great and subtle effect…it might be even better with less than 1 pixel (if that would be possible…)

  24. A very nice subtle effect. I combined it with changing the opacity of the drop shadow on some icons with my links using different rgba() settings to make it look like the icon buttons were being pressed as well.

  25. Permalink to comment#

    Sweet! I was just implementing something similar on a site I’m building but I was using margin-top. I love it for text links but I’ve also been using it for buttons a lot.

  26. Permalink to comment#

    Great!

    thx

  27. I noticed this the moment you released the new design, and was surprised to see that you set it on all the anchor tags.

    I think it’s fine in a site that is small and doesn’t do anything too crazy, but I would do it more on a single type basis, for example only on buttons, nav links, or maybe ones with class of “ui-nudge” or something.

    Still great to see you do a post on this little detail, I admire your work.

  28. Permalink to comment#

    i like this style!

  29. Permalink to comment#

    Great job Man… I Love It…

  30. That a pretty cool effect. It really improves the UX, even if it’s just a tad bit. Thanks for sharing it with us Chris.

    @Greg McAusland: Thanks for the heads up on the issues it might create if you’re not careful. Maybe there’s a way to tackle that?

  31. I have never thought of doing that, works really well and looks really nice! It really does give a button feel to it. All the little things in attention to detail can really make a site fantastic.

    I will be using this quite a bit I recon! Could you set the positioning so that it drops to an angle? so top:1px right 1px. etc? I guess only one way to find out :p

    Thanks Chris

  32. Cheers Chris, Never thought about this but glad you pointed out the finer details of web design. Like these smaller sort of things.

    Would like to know how you create the fade effect on the leave a comment form. Looks very cool.

    Cheers

    Steven

  33. Permalink to comment#

    This works really well, subtle and just makes the UX a little better.

  34. Permalink to comment#

    Sweet, I’m having that

  35. Mike
    Permalink to comment#

    Hi Chris,

    Do you have a tutorial on how to create that shadow rollover effect you placed on your content boxes on the right column? I love that!

    Thx!

    Mike

  36. Eliazer
    Permalink to comment#

    Hi Chris, I always like your stuff…
    oops…. may i dislike this one? :)

  37. Noobie question here… How to you get the text to be one color and the underline another?

  38. Permalink to comment#

    I like it. I think it adds that little detail that web designers strive for but also clearly states to the end user that it is indeed a button.

  39. Permalink to comment#

    I had to look at it twice, need new glass prescription.

    I like it, thank you for sharing

  40. REALLY great stuff. A little drawback, though, occurs when you click the link, hold the mouse button pressed then leaves the link. Doing so leaves the link 1px down until you click anywhere else in the page. As I said, a little drawback.

    This situation happens when we are going to click a link then change our mind. Don’t know if there’s a CSS based solution for this.

    Tested in FF 3.6

    Cheers,
    João Cunha

  41. Permalink to comment#

    This is totally simple but utterly effective. As all the best tricks are.

  42. I like it Chris – very subtle, but definitely adds something. I think I’ll try incorporating this into my updoming site redesign

  43. Permalink to comment#

    Personally, I’d miss the link from the start because the blue is too close to the color of the content. Especially when you view the non-underlined links in a paragraph.

    And you know what’ll improve the subtleness, a light grey line underneath the links. Especially if blue you intend to use for links is too close to the content.

    Anyway, this is my personal 2 cents. :)

  44. Michael
    Permalink to comment#

    has anybody played with the text-shadow declaration in conjunction with a button? I’m giving active links:

    position: relative;
    top: 2px;
    left: 1px;
    color: #22aaff; /* light blue */
    text-shadow: #000000 1px 0px 1px;

    Now, I just have to get the active button to look right.

    • Stephen
      Permalink to comment#

      I haven’t, but I might look into it. Instead of having text move on a user, it would look more like a button if it does something people normally wouldn’t expect from text links. Using the shadow on a rollover for the text might make it look more smooth.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".