Awesome Animated CSS Button Tutorial and Source Code

Awesome Animated CSS3 Button Tutorial and Code

We create simple 3 in 1 CSS button code using some Advance CSS properties. I will show you here some CSS techniques that you use to easy create Animated CSS Button. so lets start how to create Animated Button under CSS3.
 

HTML and CSS combination we will create three 3 button. one is main button and another two is top or bottom button little smaller. Little smaller top or bottom button is hide under main button. when hover effect is come top or bottom buttom is slide up and another is slide down.
 
 

DemoDownload

 
 

HTML Button Code

W

e take one div element and add class button name. Inside this element add span elements. this span elements style class is asign main, top and button.
 

<div class="button">

    <span class="main"><a href="#">Download</a></span>

    <span class="top"><a href="#">TOP</a></span>

    <span class="bottom"><a href="#">Bottom</a></span>

</div>

 
 

Create Main Button

Following code to create a main button. Main button height, width and background is set. and all button is display in block. Now we set font following font style.
 

span.main a {
        display: block;
        width: 190px;	
        height: 50px;
        text-align: center;	
        color: #FFF;
        background: #FC5E5E;	
        font: bold 17px/50px Arial;
        text-decoration: none;
        text-transform: uppercase;
}

 
same way we are create another two little smaller top or bottom button. but z-index properties is add in this two button and set value for -1. z-index work only when position is absolute. so focus on following two button position and z-index value.
 

span.top a {
        display: block;
        position: absolute;
        z-index: -1;	
        width: 170px;	
        height: 40px;
        background: #000;	
        color: #FFF;
        margin: -40px 0 0 10px;
        font: bold 13px/35px Arial;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;	
}
span.bottom a{
        display: block;
        position: absolute;	
        z-index: -1;	
        width: 170px;	
        height: 40px;	
        background: #000;
        color: #FFF;		
        margin: -45px 0 0 10px;
        font: bold 13px/45px Arial;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;	
}

 
Now we have to top button slip up and bottom button is slip down. so we are add above two botton top or bottom add advance transition properties.
 

        transition: margin 0.5s ease;
        -webkit-transition: margin 0.5s ease;
        -moz-transition: margin 0.5s ease;
        -o-transition: margin 0.5s ease;
        -ms-transition: margin 0.5s ease;

 
this 3 button is look at plain so we add box shadow effect also do button border some pixel rounded.
 

div.button span a {
        border-radius: 10px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	
        -webkit-border-radius: 10px;
        -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
        -moz-border-radius: 10px;	
        -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

 
Button is almost design is finish now add hover effect of top or bottom button to slip up and slip down some margin.
 

/*---------  HOVER  ---------*/
.button:hover span.top a{ 
	margin: -82px 0 0 10px; 
}
.button:hover span.bottom a{ 
	margin: -7px 0 0 10px; 
}

 
Button is slip up and slip down perfectly but try to mouse hover in this top or bottom buttom automatic both button come to return original position. so we need to set some margin same as hover effect margin. all three buttom when active not know this is actually active or not so we need to add background color.
 

/*--------  ACTIVE  ---------*/
.button a:active {
       background: #FB4C4C;
}
.button:active span.top a{
      margin: -82px 0 0 10px; 
}
.button:active span.bottom a{ 
      margin: -7px 0 0 10px 
}

 
 

What is Result ?

Check you in your self this is work acurate and perfect. This 3 in 1 button is really look like at animated type button.
 
 

Conclusion

First main think this type animated button create using in css3 is easy and use in anywhere. so no need to create flash button. Thanks
 
Like this article? Subscribe to our RSS feed. New article notification send you via E-Mail.
 
 

Back to Top
About the Post Writer View all posts by
I'm write of this article and founder of Way2tutorial or Webtuts Web Development Programming blog. My passion is keen on contributing WEB Industry. Mostly I do work on PHP, WordPress, Drupal. I hope you enjoy with this articles. Thanks for reading.

Leave a Reply

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