CSS

Animated buttons in CSS that makes sense


Last month when I was working with my new venture www.pixomania.in I accidently found this animation when I was fiddling with CSS Transition. Yes by now you would have guessed that the magic here is the CSS Transition property. But there is also another ingredient which is CSS Sprites. And the way we mix these two is using the CSS Background property. Let’s have a look at the demo.

Did you see the magic in the demo? Make sure that you have hover on all the text links buttons to see how the magic works. Now lets see the HTML and CSS mark up.

HTML Markup

Did you see the magic in the demo? Make sure that you have hover on all the text links buttons to see how the magic works. Now lets see the HTML and CSS mark up.

HTML Markup

Just write a link the normal way you do. This technique can be used with buttons too but for this example ill show you with a link.

<a class="nextpostslink" href="http://pixomania.in/pixio-series-collections/" title="Pixio Photo Series" >Pixo Series</a>

CSS markup

Before you do this make sure you have the sprite image ready. Something like this as shown below.

Now the CSS markup.

a.nextpostslink {
    background: url("images/sprite_img.png") no-repeat scroll -271px -279px transparent;
    height: 40px;
    margin: 0 0 0 15px;
    text-indent: -9999px;
    width: 40px;
    -moz-transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

a.nextpostslink:hover {
    background: url("images/sprite_img.png") no-repeat scroll -243px -279px transparent;
}

Explanation:

First we write some rules using the background property to set the sprite image to the link. Then on hover we use the background position property or in this case the short code of background position inside background property to move the sprite image when the link is hovered on. I guess till thisyou would already be familiar with it.

To this now we add the magic line “Transition” property. Since not all browsers support this property unanimously we have to use their hacks to make it work. And hence we use

transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;

The ‘all’ value refers to all the property to which css3 transition can be applied to. In this case change only the background property on hover and hence only that will be animated. But if you like to change the color of the font or adjust padding and margin you could do so and see the effects that happen.

The ease in and ease out function help the animation happen smoothly. You can read more on this here.

Hope this was useful and you can use this in your production website. Kindly share in the comments your suggestions and the website in which you have used this technique.

Latest Comments

Leave a Reply

comment on this article