Latest From The Lab

    Latest Case Studies

Tue Jul

How To Create An Awesome Animated Icon Using CSS

Every so often you’ll have probably stumbled across a webpage and wondered just how the developer created such impressive animations? Well, in this article I’ll expose the tricks of the trade and demonstrate how you can utilise CSS to make your website more lively. If used appropriately, you can really capture the interest of your viewers. For inspiration, you should definitely check out the following website:

There will be occasions where you’ll see a particular design or technique and you’ll be brainstorming the perfect word to describe it. In the case of the aforementioned website created by Jan Zavri’s, I’d say that the word ’embellishment’ is the most appropriate because even though the animations are just a small detail, they really add to the overall attractiveness of the website.

TechniqueThe animated rollover button

The technique in question takes advantage of a zombie theme for its subject. This theme has been growing growing in popularity for some time and you’ll soon see why. The visitor is posed with the choice of three types of weapons. These include: a gun, a hunting knife or a chainsaw. The HTML head sets the page title and links to the stylesheet.

001    <!DOCTYPE html>
002    <html>
003    <head>
004            <meta charset=”utf-8”>
005            <title>Zombie Time - 
Choose your weapon</title>
006            <link href=”css/style.css” 
007    </head>

Front and Center – The main content

The content resides within an inner <div> inside an outer <div> to conveniently center it on the page. The icons for the weapons are assigned the ‘.rotate’ class and that pretty much sums up the purpose of the HTML file.

001    <body>
002            <div class=”outer-div”>
003                <div class=”inner-div”>
004                <h3><a href=
005                “
006                Image by Matthew Hogan 
licensed for use under 
Creative Commons</a></h3>
007                <h1>It’s Zombie Time</h1>
008                <h2>Choose your weapon</h2>
009    <img class=”rotate” height=”300px” 
src=”images/1.svg” width=”300px”> 
010    <img class=”rotate” height=”300px” 
src=”images/2.svg” width=”300px”> 
011    <img class=”rotate” height=”300px” 
src=”images/3.svg” width=”300px”>
012            </div>
013    </body>
014    </html>

Fonts and Background – The Stylesheet

Within the style-sheet, an appropriate zombie related font is picked for the background alongside the now-familiar code in relation to setting a background image that covers the entire page. The image was created by the exceptionally talented Matthew Hogan, used under Creative Commons license and linked to, from the HTML.

001    @import url(http://fonts.googleapis.
002    html { 
003      background: url(../images/zombie.
jpg) no-repeat center center fixed;
004      -webkit-background-size: cover;
005      -moz-background-size: cover;
006      -o-background-size: cover;
007      background-size: cover;
008      color: #fff;
009    }

The .Rotate Class – The Animation

If we briefly skip over the styling of the text and focus our attention on the animation, you’ll notice that all we’ve done with the snippet of code is made sure that the duration of the spin effect is set to 0.8 seconds, while transform is targeted as the transition property.

001    .rotate {
002        -webkit-transition-duration: 0.8s;
003        -moz-transition-duration: 0.8s;
004        -o-transition-duration: 0.8s;
005        transition-duration: 0.8s;
006        -webkit-transition-property: -
007        -moz-transition-property: -moz-
008        -o-transition-property: -
009        transition-property: transform;
010    }    

I’m Spinning Around

Lastly, two transforms are added to the element when it is hovered: a 360 degree rotation as well as a scale growing its size by 30 per cent. When the elements are no longer hovered in the same transition-duration, i.e. 0.8 seconds then they will return to their non-transformed state. That’s all there is to know. You will now have an animated icon button but you should only use it occasionally for the best possible effect.


About CareWare Design

Leave a Reply

Your email address will not be published. Required fields are marked *