Media Temple Hosting

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.

9 Responses

  1. Jeroen Ransijn:

    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. 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. This is incredibly useful , but a little tweaking here and there could give a much nicer effect.

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

  6. Nice technique..pretty useful..thanks…

  7. rich97:

    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.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.