Drawer Style Beautiful Css Button With Hover Effect

Drawer Style Beautiful Css Button With Hover Effect

Button are very important and we use them on many places like read more,next post,download or many more like this.So buttons are major thing which effect on your visitors if they are beautiful then every person like to click on them.So Today, i am sharing Drawer Style Beautiful Css Button With Hover Effect for blogger blogs.

So Lets Start...

Drawer Style Beautiful Css Button With Hover Effect

Step 1
Go To Your Blogger Template
Backup Your Template First
Now Edit Template
And Search For
]]></b:skin>

And Paste Below Code In It

/*---- Stylish Download Button Start----*/.button {    width: 200px;    margin: 2px auto;}.button a {    display: block;    height: 50px;    width: 200px;   /*TYPE*/    color: white;    font: 25px/50px georgia;    text-decoration: none;    text-align: center;   /*GRADIENT*/    background: #00b7ea; /* Old browsers */    background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */    background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */;}.button a, p {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px;    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}p {    background: #222;    display: block;    height: 40px;    width: 180px;    margin: -50px 0 0 10px;   /*TYPE*/    text-align: center;    font: 12px/45px Helvetica, Verdana, sans-serif;    color: #fff;   /*POSITION*/    position: absolute;    z-index: -1;   /*TRANSITION*/    -webkit-transition: margin 0.5s ease;    -moz-transition: margin 0.5s ease;    -o-transition: margin 0.5s ease;    -ms-transition: margin 0.5s ease;    transition: margin 0.5s ease;} /*HOVER*/.button:hover .bottom {    margin: -10px 0 0 10px;}.button:hover .top {    margin: -80px 0 0 10px;    line-height: 35px;}.button:active .bottom {    margin: -20px 0 0 10px;}.button:active .top {    margin: -70px 0 0 10px;}                 /*---- Stylish Download Button end----*/

You May Also Like: Beautiful Author Box Widget Below Every Post 

Step 2

Now When You Want To Insert Button Like Download Now Or Something Else.Paste Below Code In Your Blog Post By Using HTML option and you are all done.

/*---- Stylish Download Button Start----*/
<div class="button"><a href="#">Download Now!</a><p class="top">From F4U</p><p class="bottom">For Free</p></div>
/*---- Stylish Download Button end----*/

You May Also Like: Earn Money Without Having Your Blog or Site

Instruction

Replace            with your Download Link
Replace            with your Button Text
Replace            with your Top Drawer Text
Replace            with your Bottom Drawer Text

Note:
If you find any problem regarding 'Drawer Style Beautiful Css Button With Hover Effect' feel free to comment below.