Link Nudging with CSS3 Animations

By on  

One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  MooTools, jQuery, and even the Dojo Toolkit.  Luckily CSS3 (almost) allows us to ditch JavaScript entirely to create the link nudge effect!

The CSS3

The first step is defining the animation for element's "natural state":

#animateList li a {
    cursor: pointer;
    transition: padding-left 250ms ease-out;
    /* trans pattern:  property duration timingMethod delay */

The animation above is a fairly routine, smooth animation in padding.  Now that the transition animation property is in place, let's assign it to the same group of elements when they are hovered over:

#animateList li a:hover {
    padding-left: 20px;

When the matching anchor elements are hovered, the links animate from left to right once over 250 milliseconds with an ease-out transition.  Boom!  Link nudging without any JavaScript!

Of course CSS is and always will be quite limiting with animations because they don't allow for callbacks and events like JavaScript does.  If you're just looking for a simple animation, however, CSS provides everything you need!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos


  1. this is not for now, ff 3.6 can’t do this :'( we have to wait 5 years for use it !

    • Nope, looks good in Firefox 4 beta.

    • I know but my clients are on ie6 and ie7 (like 10 % of user)… or we have to make ie version, ff version and webkit…

    • ff 3.6 is obsolete

    • Neil Monroe

      Using FF 3.6.13 it does work, but there is a lot of processing going on, so it is very slow.

      It is a nice proof-of-concept and shows that the web will very much more dynamic in terms of design and what we can do with CSS 3 in the coming months/years. Exciting times are ahead!

    • Something like this is a garnish, not the main thrust of the website it appears on. Code with some forward-thinking to it; it’ll look nice in better browsers, and in later versions of Firefox. It’s not the end of the world if the padding doesn’t work in every single browser.

    • This comment really irritates me. Why does it mean you can’t use this? Because it doesn’t look the same in every browser, means “oh no, I’m not allowed to use it”?

      We need to educate our clients in the web, and what it can and can’t do. If your client has to use IE6 for some reason, then that’s just unfortunate. But is your client always going to be the only one viewing their website? Can’t you reward their customers who visit their site with modern browsers?

      I wish people who think the same thought as your “we have to wait 5 years [to] use it!” comment would keep your thoughts to yourselves, or wake up and realise that website’s don’t have to look the same in every browser.


    • You’re spot on Kate!

      Love the link too

      Unfortunately some people do expect sites to appear the same in all browsers still…

      I /sigh too….

    • @Daniel – I’ve been there. Not much is worse than being expected to make a complex site look the same in IE6/NS4/AOL9 as the latest versions of Firefox/Safari/Chrome/Opera.

      I think the best thing for everyone to do is educate people that the web is not print and that there are so many variables affecting how a site is viewed (screen size, resolution, orientation, mobile vs regular computer, the list goes on) that it’s impossible to make a design look identical across the board, and to try is an effort in futility these days (as we’re finding out, yet again, with the advent of tablets a la iPad and the growing number of variations in Internet-capable mobile devices). (Whether you actually take/continue the job and what you do with it is ultimately up to you, though.)

    • @Kate – Your link looks the same in all browsers.

      Also, when you design a website for a client and they sign off on the look and feel that you’ve put forward in your proofs you better believe that is exactly what they expect to see ‘in every browser.’

      I feel it’s total lack of effort to not attempt to make the sites you design/program to look as close as possible.

      In this case however, it is purely an effect that really is useless anyhow so is it a showstopper, no. A 250ms animation over 20px might just as well not be there anyhow.

    • Does that mean you’re waiting for full cross browser support to use CSS3, when you say you have to wait five years to use it? I assume, then, you’re not using CSS2.1, right? After all, it doesn’t have full cross browser support, either (and last I checked, technically isn’t finished).

      If we waited for full cross browser support to implement anything, web site design would be even more stagnant than it was when IE6 had 90%+ market share.

    • Since when do web sites need to look the same in every browser?
      Progressive enrichment FTW! :)

  2. @ Chrome 2 works perfect :)

  3. formermember

    it’s called progressive enhancement… don’t complain about it NOT working in this browser or that browser. I

  4. Hence the use of the browser prefix! If you cannot use CSS3 than use JS as a fall-back. Does anybody know when Opera intends to implement this?

  5. Risto

    why, oh why?!
    this link nudging adds nothing to the usability of a link.
    just because it can be done, doesn’t mean anyone should make their users play ‘whack-a-mole’ with links

  6. It’s nice of course, but in practical use, JS is still the way to go for things like this to ensure cross-browser compatibility – I see no use to it. You can’t realistically implement web-kit-only features like this when the fall-back directly affects usability on all other browser engines.

    (And yes, progressive enhancement etc., but in this instance it doesn’t apply, for reasons mentioned above.)

    • The only thing that’s “webkit-only” is the animation (and only because FF4 isn’t out yet). The shift itself is/can be cross browser. And how does it affect usability, aside from the fact that such nudging itself isn’t really an expected reaction? The link target grows in size (if you mouse over the leftmost point you can for the links, you can still click said links after the nudge) and doesn’t affect the other elements (so things aren’t jumping around).

  7. This works just dandy in Opera too, but you need to add -o-transition: padding-left 250ms ease-out;

    Please add it to your examples and demo, thanks! :)

  8. I’ve been using this for my blog title for two to three months and even added color transition to it. lol

    Perfect for Chrome and Moz. Firefox 4 BETA. Safari can also support it. I don’t know about IE and Opera though. (IE is always forgotten)

  9. Bro, Can I have the effect which you’ve given to you – “Follow Me” widget please??

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...