Using CSS3 Text Shadow for Active Link States

Using CSS3 Text Shadow for Active Link StatesRecently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3’s text-shadow property.

In another article, Chris Coyier of CSS-Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning.

During a recent project I was working on, while messing around with the CSS3 text-shadow property, I serendipitously combined the two different effects from those two articles to create a letterpress effect on active link states.

View the demo page to see four examples of links whose active states use the CSS3 text-shadow property (along with positioning) to create links that feel, as Coyier says, “more button-like”.

The CSS

The code is pretty straightforward, and you can mess around with the blur and distance of the shadow to create different types of effects. But in general, I think this particular effect works better on larger buttons as opposed to body text links.

a:link, a:visited {
  color: #aaa;
  text-decoration: none;
  font-size: 36px;
  text-shadow: 1px 1px 1px #555;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

a:hover {
  color: #bbb;
}

a:active {
  text-shadow: -1px -1px 1px #555;
  position: relative;
  top: 1px;
  left: 1px;
}

The example code above is from the second big link on the demo page. After setting the link color and font size, the text-shadow property is offset by 1px on both the x and y axes, then the shadow is changed to a -1 pixel offset on the “active” state, or when the link is in the process of being clicked.

The third example in the demo has similar code, but doesn’t use the positioning method, making the pressed-down effect appear using just the shadow. There’s a small difference between the two, and I’m sure some experimenting will lead you to the effect you like best, if you want to create this type of “press-down” effect on links.

Nothing extraordinarily new here, just a different twist on already-existing CSS techniques that can give us a few more options when trying to create nice looking and intuitive buttons.

12 Responses

  1. Jeroen Ransijn says:

    I prefer this:

    a:active {
    text-shadow: -1px -1px 1px #555;
    position: relative;
    top: 2px;
    left: 2px;
    }

    the 2px gives it a more pushed in effect.

  2. Jogos Gratis says:

    Even though I hate internet explorer. your demo doesn’t work with IE6.
    Is there a way to go around that and show something nice to IE6 users?

    thanks

  3. Yeah, the second example looks nice, never thought of a hover state with the shizadow.

    And for the “IE6 User”, are you serious?

  4. Sivaranjan says:

    This is incredibly useful , but a little tweaking here and there could give a much nicer effect.

  5. shpyo says:

    Britilant idea :)
    @Erik Kubitschek: CSS3 is not IE6 :)

  6. Laira says:

    Nice technique..pretty useful..thanks…

  7. rich97 says:

    This is a baaaaaaaaddddd idea. (At least the demo implementation is)

    Putting aside the IE6/7/8 user issue. Links should be recognisable as links, familiarity is a (if not THE) key principle of UI design. Make them blue or another strong colour and as a bonus keep the mouse off state underlined.

  8. My favorite resource to speed up CSS3 dev is: http://css3generator.com/ has a box-shadow and text-shadow generator.

  9. Doug says:

    I liked your posting so I looked to see if you had any ads that I was interested in and visited those sites to show you support.

    Thanks,

    Doug

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).