Add Cool and Colorful CSS 3D Buttons for Blogger, Wordpress and Websites

Guyz in this Tutorial I am Going to provide you colorful 3D buttons.




 CSS CODES

FOR BLUE BUTTON
/****************************************************
 *  Push Button Blue
 *****************************************************/
.push_button_blue{
 position:relative;
 width:100px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #5877B8;
 background:#3E5C9A;
 text-align:center;
 padding:20px 30px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #224285;
        -moz-box-shadow: 0px 9px 0px #224285;
        box-shadow: 0px 9px 0px #224285;
}
.push_button_blue:active{
    -webkit-box-shadow: 0px 2px 0px #224285;
    -moz-box-shadow: 0px 2px 0px #224285;
    box-shadow: 0px 2px 0px #224285;
    position:relative;
    top:7px;
}

 FOR MAROON
/****************************************************
 *  Push Button Maroon
 *****************************************************/
.push_button_maroon{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #D94E3B;
 background:#cb3b27;
 text-align:center;
 padding:20px 30px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}
.push_button_maroon:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}


FOR GREEN

/****************************************************
 *  Push Button Green
 *****************************************************/
.push_button_green{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #31CC29;
 background:#21B519;
 text-align:center;
 padding:20px 30px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #13850D;
        -moz-box-shadow: 0px 9px 0px #13850D;
        box-shadow: 0px 9px 0px #13850D;
}
.push_button_green:active{
    -webkit-box-shadow: 0px 2px 0px #13850D;
    -moz-box-shadow: 0px 2px 0px #13850D;
    box-shadow: 0px 2px 0px #13850D;
    position:relative;
    top:7px;
}


FOR BLACK
/****************************************************
 *  Push Button Black
 *****************************************************/
.push_button_black{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:50px;
 border:solid 2px #828282;
 background:#595959;
 text-align:center;
 padding:10px 20px;
 
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 
 -webkit-box-shadow: 0px 9px 0px #2B302B;
        -moz-box-shadow: 0px 9px 0px #2B302B;
        box-shadow: 0px 9px 0px #2B302B;
}
.push_button_black:active{
    -webkit-box-shadow: 0px 2px 0px #2B302B;
    -moz-box-shadow: 0px 2px 0px #2B302B;
    box-shadow: 0px 2px 0px #2B302B;
    position:relative;
    top:7px;
}

HTML CODE
<a href="#" class="push_button_blue/maroon/green/black">
 Grabitin
</a>


Comments

Post a Comment

Leave your views.

Popular posts from this blog

How to add Guest Book Widget For Blogger and Websites

Nokia 9 Images Leak and We See Something Satisfying

Cool Android Setups #1