3 Animated CSS3 Download Buttons

3 Animated CSS3 Download Buttons

CSS3 gives us a great opportunity to create awesome animation without having coding and solve slow data loading issue. Also now most of modern web browsers support CSS3animation and it’s effects. Another great news is that, now CSS3 animations are supported by mobile web browsers. We can create flash like animation using css3. I my previous tutorial, You learned how to create cool buttons with css3 gradient. Today we are going to learn how to create cool CSS3 animation for download buttons.

– What we are going to create?

cool css3 animated download buttons

We are going to create 3 cool animation in buttons. First button contain simple fade effect, second one is bounce effect and third one is rotation effect. I hope you like all of them.

– What we need to know for animation?

In this tutorial, you are introducing with some new terms of css3. Here goes list of our new terms –

1. transform: scale(1).

This css3 property use for changing size of HTML elements. parameter 1 refers it’s original size and it means 100%. So, If you write 1.2 then it means you scale your HTML element in to 120% by it’s size.

2. transform: scale(0)

This css3 properties use for changing size of HTML elements in to 0%.

3. transition: all 0.6s ease-in-out;

This css3 elements use for smooth animation. “all” refers when you use hover then transition effect each elements for 0.6s.

4. z-index: 100;

We are going to use 2 layers and 1st layer overlap with 2nd layer. z-index gives more priority to show our second layer over 1st layer.

5. opacity: 1;

This property use for layer visibility. opacity 0 means hide the layer or HTML elements.

Let’s go for coding-

– CSS For Basic Download Button Animation:

a.rounded-button{    
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    float: left;
}

.download-icon-layer{
    border: 2px solid lightgray;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    padding: 10px;    
    position: absolute;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index: 100;
    opacity: 1;
}

a.rounded-button:hover .download-icon-layer{
    border: 2px solid transparent;
    opacity: 0;
}

.file-icon-layer{
    border: 2px solid red;
    border-radius: 100%;
    padding: 10px;
    position: absolute;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;    
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);    
    transform: scale(0);
}

a.rounded-button:hover .file-icon-layer{
    background: lightyellow;
    border: 2px solid yellowgreen;
    z-index: 101;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

– HTML MarkUp For Basic Download Button Animation:

<div class="button-wrapper">     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/ai.png" alt="zip-icon"/> </span>
    </a> 
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/aiff.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/avi.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/pdf.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/doc.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/css.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/exe.png" alt="zip-icon"/> </span>
    </a>
     
 </div>

Demo & Download

– CSS For Bounce Effect Animation:

a.rounded-button{    
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    float: left;    
}

.download-icon-layer{
    border: 2px solid lightgray;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    padding: 10px;    
    position: absolute;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index: 100;
    opacity: 1;
}

a.rounded-button:hover .download-icon-layer{
    border: 2px solid transparent;
    -moz-animation: 1.2s linear 0s normal slideDown;
    -webkit-animation: 1.2s linear 0s normal slideDown;
    -o-animation: 1.2s linear 0s normal slideDown;
    -ms-animation: 1.2s linear 0s normal slideDown;    
    animation: 1.2s linear 0s normal slideDown;
    opacity: 0;

}

.file-icon-layer{
    border: 2px solid red;
    border-radius: 100%;
    padding: 10px;
    position: absolute;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;    
    -moz-transform: scale(0) rotate(0deg);    
    -webkit-transform: scale(0) rotate(0deg);    
    -o-transform: scale(0) rotate(0deg);    
    -ms-transform: scale(0) rotate(0deg);    
    transform: scale(0) rotate(0deg);  
}

a.rounded-button:hover .file-icon-layer{
    background: lightyellow;
    border: 2px solid yellowgreen;
    z-index: 101;
    -moz-transform: scale(1) rotate(360deg);
    -webkit-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
}

@keyframes slideDown{
    0% { top: -30px; }
    100% { top: 100px;}
}
@-moz-keyframes slideDown{
    0% { top: -30px; }
    100% { top: 100px;}
}
@-webkit-keyframes slideDown{
    0% { top: -30px; }
    100% { top: 100px;}
}
@-o-keyframes slideDown{
    0% { top: -30px; }
    100% { top: 100px;}
}
@-ms-keyframes slideDown{
    0% { top: -30px; }
    100% { top: 100px;}
}

– HTML MarkUp For Bounce Effect Animation:

<div class="button-wrapper">
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/ai.png" alt="zip-icon"/> </span>
    </a> 
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/aiff.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/avi.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/pdf.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/doc.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/css.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/exe.png" alt="zip-icon"/> </span>
    </a>
     
</div>


Demo & Download

– CSS For Rotation Effect Animation:

a.rounded-button{    
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    float: left;    
}

.download-icon-layer{
    border: 2px solid lightgray;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    padding: 10px;    
    position: absolute;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;    
    z-index: 100;
    opacity: 1;
}

a.rounded-button:hover .download-icon-layer{
    border: 2px solid transparent;
    opacity: 0;    
}

.file-icon-layer{
    border: 2px solid red;
    border-radius: 100%;
    padding: 10px;
    position: absolute;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;    
    -moz-transform: scale(0) rotate(0deg);    
    -webkit-transform: scale(0) rotate(0deg);    
    -o-transform: scale(0) rotate(0deg);    
    -ms-transform: scale(0) rotate(0deg);    
    transform: scale(0) rotate(0deg);    
}

a.rounded-button:hover .file-icon-layer{
    background: lightyellow;
    border: 2px solid yellowgreen;
    z-index: 101;
    -moz-transform: scale(1) rotate(360deg);
    -webkit-transform: scale(1) rotate(360deg);
    -o-transform: scale(1) rotate(360deg);
    -ms-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
}

– HTML MarkUp For Rotation Effect Animation:

<div class="button-wrapper">
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/ai.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/aiff.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/avi.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/pdf.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/doc.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/css.png" alt="zip-icon"/> </span>
    </a>
     
    <a href="#" class="rounded-button">
        <span class="download-icon-layer"><img src="icons/download.png" alt="Download-icon"/> </span>
        <span class="file-icon-layer"><img src="icons/exe.png" alt="zip-icon"/> </span>
    </a>
     
</div>


Demo & Download

– Conclusion:

I hope these ideas of buttons and create a scope to innovate another nice buttons with simple HTML and CSS3 stuffs. Change colors, background, fonts, try different width or height, make some cool buttons and share with us 🙂

– Now It’s Your Turn:

What kind of points or ideas did I missed in my tutorial? What do you think about designing cool buttons. Share your ideas, knowledge and suggestions with us below in discussion area.

Enjoy!

Share It

Related Posts