Beautiful Hover Download Button
widget for blogger that might be utilized as a bind to download indexes like
codes, scripts, films and any kind of index. Inherent html and css and totally
customizable. It has a portion of the new and unseen CSS Hover impact which you
will unquestionably like.
In this widget for blogger when
you drift your rodent on the symbol then pictures vanished and the content
shows up with shade changing down bolt bind. It is very entangled to depict
that widget however when you will see a demo you will get my focus. These are
greatly suitable when you utilize the download alternative within your post for
instance when you need to embed a download bind for clients where they can
download records. You can utilize this for any kind of document like script,
codes, pictures, rar documents, movies and whatever viable if left.
Must go through this beautiful widgets :
- Beautiful shutter effect social media widget for blogger
- Beautiful 3D Navigation Menu Widget for blogger.
- How to add Image Morphing Effect to Blogger Posts.
- Blogger Flat UI Email Subscription Widget.
- How to add zoom effect to blogger post images.
- Beautiful Email Subscription Blogger Widget.
- Latest Beautiful Social Sharing Blogger Widget.
- Beautiful Drop Down Navigation Menu For Blogger's.
Code Installation steps :
- Go to = > Blogger => template.
- Find ]]></b:skin>
- Paste the below Code above ]]></b:skin>
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-simbh-text{
padding-top:13px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #5d81ab;
color:#000
}
.shreem-simbh-text small{
display:block;
font-size:12;
letter-spacing:1px;
color:#000;
}
.shreem-simbh-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-simbh-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/AVvXsEjx_WMq0e460FFAUsQpFE-KjBTLx6caN5V0N7VL-xVejzHVMBGCvAJR-XhWFJ1ciwH5UdBlgoqxfKeOFySnaAHTny9F7QObZWnChere6atw7t4m4msrptLaj8FygT9HYNyEeB61ds5ilxaU/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-simbh-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-simbh-text-right span{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
- Copy the below Code, paste where you want to display this buttons.
<div class="content">
<div class="button-wrapper">
<a href="#" class="shreem">
<span class="shreem-text">$29</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3U41U1wJCcexEArXvk44bwLWhGwJzCf7y9t5Vam-yEXWqjvtkKz1qYLWWpz8YkG46SCBviZIAHPtDAMs4dyoSriW051ldqDqsUunZHmIEpjzb1J0VlvYaxFTqlYtlWFQochasN2KgEaL/s1600/12.png" alt="codes" />
<span class="shreem-simbh-text"><small>Full Code &</small> Download</span>
<span class="shreem-simbh-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/AVvXsEitqgfQbnFbOuBOgjpA5dtqdreLodpbWqpdg6zPrSQtNYKJYNmm6HAVOrt_WKKXd7u4ZDQy6Ex1_fF7ogPpDVgux1V0DkaShIFmd5TMufR_tsDhJNwrsQcq2HMX40zgZu1R3IDxMRTTvSw8/s1600/1.png" alt="images" />
<span class="shreem-simbh-text"><small>All Free Images &</small> Download</span>
<span class="shreem-simbh-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/AVvXsEhPFkigQR2IL8GuxYNn6523POYyL5gAWmSN6_kcILE00dhZW0n7BhhiK2EGYG8hPkNW9gsgnf3Ke6GEBknQn6B9bzJIX0xCepBf8ccmyJ6_kaT2wWk9XmvJqivVxO1_ImVhEH4jMenGBzs8/s1600/15.png" alt="video" />
<span class="shreem-simbh-text"><small>Full Video &</small> Download</span>
<span class="shreem-simbh-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/AVvXsEhkrl5DsdFkqbXCVzgPMmr3DX51Rz7RSv0rYAZbNnPPyqsaz76YIScHQ5WG-vrzTVfkYSF8OOAS9N6a4ZdaX4CZzcYmGocEWfBLH-2X5_rxQh6zLf3xirILFaoWWbu4qHBqupE28nerfTa9/s1600/9.png" alt="All files" />
<span class="shreem-simbh-text"><small>Free Files &</small> Download</span>
<span class="shreem-simbh-text-right"><span></span></span></a></div></div></div>
- save it.
that's it , finished the
installation, enjoy the post , please make sure that you have shared this
widget to your friend, and important line we always focused your questions
below in comments sections.
Like the Post? Share with your Friends:-
0 comments: