Saturday, 21 June 2014

CSS3 Awesome Animated Download Button For Blogger With Hover




Fast Copy the html code From the below Box
Go to blogger dashboard and edit html
Now find out ]]></b:skin> And paste the code above ]]></b:skin> tag
/* --------------------------------------
Awesome CSS3 Download Button for Blogger
http://premium-stuff-guru.blogspot.com
------------------------------------------ */
.dlbutton {
    margin: 150px auto;
    width: 200px;
    position: relative;
    z-index: 1;
}

.dlbutton a {
    display: block;
    width: 200px;
    height: 50px;
    background: #00b7ea;
    background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
    background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
    background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
    background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
    background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
    color: white;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font: 17px/50px Helvetica, Verdana, sans-serif;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

.dlbutton a, .slide {
    -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);
}

.slide {
    position: absolute;
    z-index: -1;
    display: block;
    margin: -50px 0 0 10px;
    width: 180px;
    height: 40px;
    background: #222;
    color: #fff;
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
}

.dlbutton:hover .bottom {
    margin: -10px 0 0 10px;
}

.dlbutton:hover .top {
    margin: -80px 0 0 10px;
    line-height: 35px;
}

.dlbutton a:active {
    background: #00b7ea;
    background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));
    background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
    background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
    background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
    background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}

.dlbutton:active .bottom {
    margin: -20px 0 0 10px;
}

.dlbutton:active .top {
    margin: -70px 0 0 10px;
}
Now use this code in your blogger post wherever you want to display Download button. make sure to replace file size according to your file size

1
2
3
4
5
<div class="dlbutton">
<a href="YOUR-LINK-HERE" target="_blank">Download</a><div class="slide top">
resume-able link</div>
<div class="slide bottom">
4.7 MB</div>

0 comments:

Post a Comment

visitor

 
- See more at: http://adminwidget.blogspot.in/2014/06/how-to-add-next-previous-numbered.html#.U60N95SSyKQ