4 Flip Trick Download button widget for blogger to allow users to download files, videos , codes and videos.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBMAag8xaxcPuH7vPzS74J9Rqy5HIaRlUX-kLJkazb85AYas9UFgn3FqJky36-iG0e1-7DuG_RloSavWm0gPkLlNKI6a5B4wJw-uhmbiF7qM0AvMes95lV7zexPz5eu6df4VWqcjHinIc/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">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.
<div class="button-wrapper">
<a href="#" class="shreem">
<span class="shreem-text">$29</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3redNq0Ac5rthrSoxpKF2CR2VOBe-8stdEDJkqn-APNDgsBAefzJcgFiE8HV9m4lI7p_yLyO9slem8gXYeNjcW6d7mQXRCUhvzZXj_tAvY1U_5fN3ivT5W1sMN2_tvoj87j6uge5YEKKQ/s1600/12.png" alt="codes" />
<span class="shreem-avdhoot-text"><small>Full Code &</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-my9BZ8Lql5cyOnjoPY9CK44dwh9Zuprf6bFITsjJe-AqP6JyMzhErLdXXP5sE4jUERREk1JAEeJHsa-VKZqIZt28Zvk25Y8rQM92c33Eu00VgN6bdzUdNVCUB6eXKhPnPrpA37A4Z0gn/s1600/1.png" alt="images" />
<span class="shreem-avdhoot-text"><small>All Free Images &</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTOpbCNaXLFX5KsSp_gkIiDh_aAwnl9Ht4SRBt7wReKTurVIoY44IS6JjApIJQWsq-uAueXP8dHGbLDLN0gD_q2ta_DEYKSlT6On8MT9kl1cHn3FqQVOQibSzGG0vuiSinG5vKRExwHLPq/s1600/15.png" alt="video" />
<span class="shreem-avdhoot-text"><small>Full Video &</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwYUm8F26QdkcoB5h6eynHRbjD1XvDanbwrkaaLHEUfFjv-N7oEes85RcMsiQSD94-en4tBW_3lZlFjP1BJiTbzGkvXH0-kXngZjIWgVLML9dNi-wLVUSK0A0P5q338WOUlJbU0BIAaKf/s1600/9.png" alt="All files" />
<span class="shreem-avdhoot-text"><small>Free Files &</small> Download</span>
<span class="shreem-avdhoot-text-right"><span></span></span></a></div></div></div>
If you like it, please, don't be hesitate to share or like this post. Thank you!
