A simple, subtle yet aesthetically pleasing effect you can use is Link Nudging. What does this mean? Something like what’s seen here.

Link nudging is used by big web design websites such as CSS Tricks through MooTools or jQuery.

This post will show how to do a simple Link nudging using the JavaScript library jQuery. You can use jQuery inside <script></script> or in an external JavaScript file.

You can get jQuery here, or import it from Google AJAX Libraries API, like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Then we can set it up. Code in jQuery is put in the following block:

$(function() {
    /* code goes here */
});

So here comes the link nudging. It takes only a few lines:

$(function() {
    $('a').hover(function() {
        $(this).animate({
            paddingLeft:"30px"
        }, 300);
    });
});

$(‘a’) finds all anchor elements in the DOM, and applies the effect when the anchor is hovered: it animates the element until padding-left is 30px. jQuery is wonderful because it’s like an extension of CSS – the syntax is very close. The 300 is the time in milliseconds.

Now that’s great, it nudges when we hover, but it doesn’t move back when we move our mouse out! The hover function in jQuery actually supports a second parameter, the function for mouse out:

$(function() {
    $('a').hover(function() {
        $(this).animate( {
            paddingLeft:"30px"
        }, 300);
    }, function() {
        $(this).animate( {
            paddingLeft:"0"
        }, 300);
    });
});

Obviously, this resets the padding-left to 0.

Then we run into a problem. Mouse over and out repeatedly many times and it will start lagging behind. Luckily, jQuery has this function ‘stop()’ that stops whatever it was doing before. Because jQuery has a chaining feature, this becomes very simple.

$(function() {
    $('a').hover(function() {
        $(this).stop().animate( {
            paddingLeft:"30px"
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0"
        }, 300);
    });
});

And that’s it.

Feel free to use this code or customize it for your own website.