how to add hover effect download button inside blogger post

Hi friends in this post I am sharing how to add beautiful hover effect buttons inside the blogger post.The Css code credit fully goes to alessioatzeni and we thank the site for making a animated like effect within css and not used any js.Ok friends now the most important how we have to add this code in blogger and making it work perfect.And still google drive supports host we explaining the tutorial with that option.The advantage is that code will not mingle with template code.

How to make direct (also a streaming link) for uploaded css using google drive?

Copy the css code given below and upload it to google drive.Name the css file name as secondeffect.css (or) anyname but should end with “.css”

.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
}
.view .mask, .view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view a.info {
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh47kRifYYQzFAw0D6EQZI_UDCQsA23idrRB2DtXV4uokY_nORGf9HQCP9MQ9BZGndXncQFTu1Agwc0Uv8-fR5qSfi6qsAXGO_VfpumQ-fqSlwCwWGyEhDJ8wQxyY4-qaWkPjLI_xdoKgJq/s1600/702download-buttons02+copy.png) center no-repeat;
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:108px;
   height:45px;
}
.second-effect .mask {
   opacity: 0;
   overflow:visible;
   border:0px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
}
.second-effect a.info {
   position:relative;
   top:-10px;
   opacity:0;
   transform:scale(0,0);
   transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
   opacity:1;
   transform:scale(1,1);
   transition-delay:0.3s;

}

The yellow highlighted link is the download button path.You can use this or upload the image to blogger given below

Keep in mind friends after uploading this image you have to right click on the image and click “copy link address” .After that paste copy link in the highlighted color .And most important after all doing this,then upload css file to google drive.After uploading and make sharing option as public you will get the link ,copy it .If you not yet copied do the below procedure. Right click the uploaded css file and choose receive link.

Then you have to wait a little to get sharing settings.Click “sharing settings”.

Choose copy link in the popup window.

For example if you have the link “https://drive.google.com/file/d/0Byde2iOkYelrUzZpeEpqdWVEd2c/view?usp=sharing” .Copy only “0Byde2iOkYelrUzZpeEpqdWVEd2c” . Now you have to paste the link by replacing the “highlighted color” in the below code.

Where to place the streaming link in blogger template?

Goto blogger>>Template>>Edit HTML>>click Format Template>>CTRL+F>>Type in the field <head> .?After finding <head > section

paste <link href='https://googledrive.com/host/0Byde2iOkYelrUzZpeEpqdWVEd2c ‘ rel='stylesheet' type='text/css'/> just below the head section of blogger.

After make a new post and choose HTML mode.

Now copy and paste the below code in that post (html mode)

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br/>
<div class="view second-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkRdoDHiZLkBcaAmACLLXuoNSq2xghUvazLAF7Zv3BY_7kuS0TJ-ThS6qmWuSl9HUHoXwupYch0g7We4sOYFlRf1QmOE8opaq-vrZvIcRpaFbR5U_gc6Ht-qwSN-zC9OAFyOH25X9haGz/s1600/gd.png" />
<br />
<div class="mask">
<a class="info" href="http://www.dropbox.com/s/gv2gwnfjejcvj1g/verify-blog-site-google-webmaster-techinfoweb.zip?dl=1" target="_blank" title="Download">Full Image</a>
</div>
</div>
<div class="view second-effect">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESypvCoPVsMsuIjAlrh7k8igKxQrS3zgtvMuVh5ntX1uWAGZRDjn0cfdFM62RWCNmCa6eioPSUUdHZd6UoSEiOYCbgXkrdTWmOergDAe6Y1HB9VeHMPxY_4Futfu9qN0f8PfN5iFuqZR1/s1600/brdomaintoblogger2.png" />
<br />
<div class="mask">
<a class="info" href="http://www.dropbox.com/s/gv2gwnfjejcvj1g/verify-blog-site-google-webmaster-techinfoweb.zip?dl=1 " title="Download">Full Image</a>
</div>
</div>
</div>

Here the yellow highlighted color is the image which your visitor will see the image.You can create one with the size 275x247.Then only the image looks good.The black highlighted color is the download link where the user can download.I have used the dropdownbox link.

Download the tutorial in animated gif