Showing posts with label Download Buttons. Show all posts
Showing posts with label Download Buttons. Show all posts

11/05/2015

4 Flip Trick Download Buttons For Blogger

4 Flip Trick Download button widget for blogger to allow users to download files, videos , codes and videos.
Download Buttons
Flip trick download button widget for blogger that can be used as a button to download files like codes, scripts, videos and any type of file. Built in html and css and completely customizable. It has some of the new and unseen CSS Hover effect which you will definitely like. It has css hover effect and now in this post again we are using the css hover effect but with a flip trick effect that can be put in blogger easily.
In this widget for blogger when you hover your mouse on the icon then images disappeared and the text appears with color changing down arrow button. It is quite complicated to describe that widget but when you will see a demo you will get my point. These are extremely useful when you use the download option in your post for example if you want to insert a download button for users where they can download files. You can use this for any type of file like script, codes, images, rar files, videos and any other if left.

How To Install ?
To add Flip Trick Download Buttons, Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following code:
a{
color: #fff;
text-decoration: none;
}
.shreem{
background:#80a9da;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
padding-left:90px;
padding-right:105px;
height:90px;
display:inline-block;
position:relative;
border:1px solid #5d81ab;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.shreem img{
position:absolute;
left:15px;
top:13px;
border:none;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.shreem .shreem-text{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#bde086;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
opacity:0;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.shreem-avdhoot-text{
padding-top:13px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #5d81ab;
color:#fff;
}
.shreem-avdhoot-text small{
display:block;
font-size:11px;
letter-spacing:1px;
color:#fff;
}
.shreem-avdhoot-text-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
border-left:1px solid #5d81ab;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.shreem-avdhoot-text-right span{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#5b5b5b url(http://2.bp.blogspot.com/-k4V7R8sEi5k/Uf-Xo6wr_hI/AAAAAAAABRU/duviyr64Ppc/s1600/arrow_down_black.png) no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.shreem:hover{
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.shreem:hover img{
opacity:0;
}
.shreem:hover .shreem-text{
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.shreem:hover .shreem-avdhoot-text-right span{
opacity:1;
background-color:#bc3532;
}
.shreem:active{
position:relative;
top:1px;
background:#fff;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#80a9da;
}
.shreem:active .shreem-avdhoot-text-right span{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}

HTML
- Now Copy and paste the html code at the place where you want to show this widget.
- You can insert this animated button in gadgets or inside the page.
<div class="content">
<div class="button-wrapper">
<a href="#" class="shreem">
<span class="shreem-text">$29</span>
<img src="http://1.bp.blogspot.com/-fr-z0Q4LmrI/Uf-XzWVOL8I/AAAAAAAABR8/h4NVzciseaE/s1600/12.png" alt="codes" />
<span class="shreem-avdhoot-text"><small>Full Code &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$19</span>
<img src="http://4.bp.blogspot.com/-1irvPu8pIfc/Uf-XvrfCl6I/AAAAAAAABRc/vq8xZ1Ud81o/s1600/1.png" alt="images" />
<span class="shreem-avdhoot-text"><small>All Free Images &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$24</span>
<img src="http://2.bp.blogspot.com/-LTGOks7lINo/Uf-X0m1eBOI/AAAAAAAABSM/Gl4ShEVLD_0/s1600/15.png" alt="video" />
<span class="shreem-avdhoot-text"><small>Full Video &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a>
<a href="#" class="shreem">
<span class="shreem-text">$39</span>
<img src="http://1.bp.blogspot.com/-F6oYa8-Mhe4/Uf-X7mRlBQI/AAAAAAAABTo/PSxwmvN9O6k/s1600/9.png" alt="All files" />
<span class="shreem-avdhoot-text"><small>Free Files &amp;</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a></div></div></div>
That's all you have to do. So this was the simplest way to add animated buttons widget for blogger. A simple copy and paste code.
If you like it, please, don't be hesitate to share or like this post. Thank you! 

5/14/2015

Best CSS3 Animated Download Button for Blogger


CSS3 Animated Download Button for Blogger
Once you have seen the demo, to add this animated download button to your blog posts follow the below steps.

This button is made up of Pure CSS3 i.e. without the usage of any Images or JavaScript. This button may be really helpful for game/software download blogs. So a live working demo of this button can be seen by clicking the above button. You will see the button in the codepen.

Adding the CSS in the Template
Go to Blog Title → Template → Edit HTML and search for the code </body> and paste the below given code just above </body>.
<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}

 /* Get this button at http://blogger-templatees.blogspot.com */
.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*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=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button 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);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    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;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>
After adding the code save the template and follow the next step.

Adding the Button
So as we have added the CSS we just need to add the HTML in the desired place. So whenever you want to add this button to your post just switch the post editor to HTML from Compose and add the below HTML.
<div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div>
After adding the HTML change # with the URL of the file to be downloaded. Change 1.2MB .zip with the files size and extension.
You are done now. Now you and your visitors can see this awesome Pure CSS3 animated download button in your blog.

11/10/2014

Animated Download Buttons For Code Video and File For Blogger

If you write about web design, blogger or any technical topic then you definitely use codes to explain things and give an option to your users to download files so here are some animated buttons that can be used for anything like :

-To download Code and Scripts.
-To download videos.
-To download files.
There are 3 awesome designed animated buttons based on CSS and HTML that works in all browsers. When user hovers their mouse cursor on those buttons then animation starts and buttons expand themselves on mouse hover. This is done with pure CSS effect. It makes your post more professional.

How to install:
Installation is pretty easy. Place the CSS code below .You have to copy this code into your blogger template for only one time and it will work after that use separate HTML Code to use each type of button.

CSS
#animationcss .pure {
background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
  display:block;
  color:#212121;
  float:none;
  height:80px;
  width: 80px;
  line-height:80px;
  margin:10px auto 0;
  padding-top:1px;
  position:relative;
  text-shadow:0 1px 0 #FAFAFA;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  -webkit-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
  -ms-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
  -moz-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
  -o-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
  transition:width .25s ease-in-out,
background-color .25s ease-in-out;
  -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
  box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}
#animationcss a span {
  display:none;
}
#animationcss:hover a span {
  display:inline;
}
#animationcss a span {
  font-size:1.4em;
}
#animationcss:hover .pure {
  width:420px;
}
#animationcss .demo {
  background-position:0 -80px;
}
#animationcss .info {
  background-position:0 -160px;
}
#animationcss .download {
  background-position:0 0;
}
Hit CTRL+F and search for ]]></b:skin> tag
Now paste the CSS Code above just before the ]]></b:skin> tag.
CSS Part is done.

HTML
Below are 3 HTML codes for all 3 button. Now if you want to use all three buttons in one place then copy the entire code and paste it into the blogger post HTML editor. Now replace # with your links and you are done.
<div id="animationcss">
<a href="#" class="pure demo"><span>Button For Video</span></a>
</div>

<div id="animationcss">
<a href="#" class="pure download"><span>Download Button</span></a>
</div>

<div id="animationcss">
<a href="#" class="pure info"><span>Setting Button</span></a>
</div>

And for separate buttons choose for example this code 
<div id="animationcss">
<a href="#" class="pure download"><span>Download Button</span></a>
</div>
So this way you can make your blogger blog more professional by adding animated download code, video and settings buttons that are based on css and html . Thanks for viewing this widget for blogger. If you like, please don't be hesitate to share or comment bellow. Thank you!