Sunday, November 18, 2012

CSS3 Awesome Animated Download Button For Blogger With Hover

CSS3 Awesome Animated Download Button For Blogger With Hover


Here is a detailed tutorial for pure css3 animated 'Download' button which you can use in your blogger blog/wordpress/any website. This tutorial was originally created by DesignShack. Here i will discuss to implement this button in blogger blog but you can download source file and implement it in your website.



Demo






Click here for Live Demo

Here We go...






Please make a backup of your template before proceeding.

Step 1: Go to Blogger Dashboard>Template>Select 'Expand Widget'

Step 2: Now Search for ]]></b:skin> and add this code above it.

/* --------------------------------------
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;
}

Step3: Now Use this code in your blogger posts wherever you want to display Download Button. Make sure to replace file size according to your file size.

<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>

Important Note:






There is a slightly problem with blogger post compose mode, you will notice that after using the code above you may not see the same result as shown in image or demo. That's because when you switch to compose mode from html mode, blogger breaks the HTML code into two lines. So it's solution is that when you paste above HTML code in HTML mode, don't switch to compose mode and publish the post.

What do you say?






I hope you will find this tutorial helpful. What do you say about this tutorial please don't forget to post your comments.

7 comments:

  1. you f**kn leacher !

    i made this first for my friend
    see it in action here

    http://invisiblethingslab.blogspot.in/

    if you leech sometihng just give credits or links !

    shame on you!

    ReplyDelete
  2. thanks on hacksofworld.blogspot.in

    ReplyDelete
  3. Pretty nice post. just became aware of your blog through Google, and found that it’s truly informative.
    website design

    ReplyDelete
  4. its working nice but one problem when it displays on blog posts it display after some spaces from the post like
    http://techpaki.blogspot.com/2013/11/direct-download-format-factory-best.html

    ReplyDelete
  5. Helen Alex Murray is a Vancouver based abstract artist painting out of the East Side Studios. Helen started painting at the Shadbolt Centre in Burnaby, BC, in her youth and was chosen to join the ranks in their selected Young Artists program where she participated in small group showings and solo exhibits. Helen then moved to Toronto to attend Ryerson University until her graduation when she came back home to Vancouver to be inspired by the ocean and mountains of the west coast. Helen now paints professionally, her work motivated by the overlap of feelings and mood through movement and layer of colour. Her paintings resize overwhelming and complicated moments into manageable bursts of expression. The expanse of colour and shapes is often contrasted by a bed of white, using glossy metallic and mother of pearl elements to finish the images. Let her paintings chase the shadows and trace the light in your life.


    https://www.helenalexmurray.com

    ReplyDelete

Social Profile

Total Pageviews