Link Indenting With CSS3 Animation

In website design there is something that your website must always do this is styling your links so that they stand out from normal text on your page. This will make it easy for the user to find where your links are on the page. Using CSS you can even add a style to the hover event of the link, like what I do on this site on the **hover event ** I change the text to bold. Changing the style on the link allows the link to stand out even more. I was looking around some sites and saw links in the sidebar of their site and on the link hover event they would indent it so it stood out from the list. I had a look at how they did this effect and they were using jQuery to make the indent animate, I thought you could easily do that in CSS with the new CSS3 animation, in this tutorial I will explain how you can create CSS indenting using CSS3 animation.

#The HTML

The HTML for this is going to be just a simple list with links.

<ul class="indenting_links">
	<li><a href="">Link 1</a></li>
	<li><a href="">Link 2</a></li>
	<li><a href="">Link 3</a></li>
	<li><a href="">Link 4</a></li>
	<li><a href="">Link 5</a></li>
	<li><a href="">Link 6</a></li>
	<li><a href="">Link 7</a></li>
	<li><a href="">Link 8</a></li>
	<li><a href="">Link 9</a></li>
	<li><a href="">Link 10</a></li>
</ul>

#The CSS3

Now we have defined the HTML we can add the CSS to do the indenting animation. We already have a class on the list so we can use this to define the CSS. We need to add the functionality on the hover event of the link so use the following CSS.

.indenting_links li a:hover {
	padding-left:20px;
    transition: padding-left 500ms ease-out;
}

This CSS will add a padding left of 20 pixel on the hover event of the link using the transition property we can say to use the padding left property and take 500ms to finish. This is all we need to achieve the link indenting effect give it a go and let me know how you get on with CSS3 animation.