How to Add Preview and Download Buttons in Blogger (Modern CSS Buttons Tutorial)

Welcome back! In this tutorial, you will find two clean and professional buttons designed for both preview and download actions. These buttons include a file size label, dynamic hover animation, and a modern look created using pure CSS—making them lightweight and visually appealing. All you need to do is install the buttons and start using them inside your Blogger posts.

How to Add Preview and Download Buttons in Blogger | Techno Praveen

Add Preview and Download Buttons to Blogger

Technical and resource-sharing blogs often require clean, professional-looking download and preview buttons. This guide shows you how to easily add such buttons to any Blogger theme. These buttons are extremely popular across the web and feature a smooth sliding animation when hovered, making your post look modern and engaging.

Also Read:

These preview and download buttons include animated icons that slide when hovered, making the experience more interactive. You can check the design in the demo image above.

Steps to Install the Buttons

1. Go to your Blogger Dashboard → Theme → Edit HTML.
2. Press Ctrl + F and search for: <head/>
3. Paste the following code above it (this adds the required icons — if you already have Font Awesome, you can skip this step):

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

1. Next, search for:]]></b:skin>

2. Paste the following CSS code directly above it:

#wrap {
  margin: 20px auto;
  text-align: center;
}
#wrap br {
  display: none;
}

.btn-slide,
.btn-slide2 {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 200px;
  line-height: 50px;
  padding: 0;
  border-radius: 50px;
  background: #fdfdfd;
  border: 2px solid #0099cc;
  margin: 10px;
  transition: 0.5s;
}
.btn-slide2 {
  border: 2px solid #efa666;
}

.btn-slide:hover {
  background-color: #0099cc;
}
.btn-slide2:hover {
  background-color: #efa666;
}

.btn-slide:hover span.circle,
.btn-slide2:hover span.circle2 {
  right: 100%;
  margin-right: -45px;
  background-color: #fdfdfd;
  color: #0099cc;
}
.btn-slide2:hover span.circle2 {
  color: #efa666;
}

.btn-slide:hover span.title,
.btn-slide2:hover span.title2 {
  right: 40px;
  opacity: 0;
}

.btn-slide:hover span.title-hover,
.btn-slide2:hover span.title-hover2 {
  opacity: 1;
  right: 40px;
}

.btn-slide span.circle,
.btn-slide2 span.circle2 {
  display: block;
  background-color: #0099cc;
  color: #fff;
  position: absolute;
  float: right;
  margin: 5px;
  line-height: 42px;
  height: 40px;
  width: 40px;
  top: 0;
  right: 0;
  transition: 0.5s;
  border-radius: 50%;
}
.btn-slide2 span.circle2 {
  background-color: #efa666;
}

.btn-slide span.title,
.btn-slide span.title-hover,
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
  position: absolute;
  right: 90px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #30abd5;
  transition: 0.5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
  color: #efa666;
  right: 80px;
}

.btn-slide span.title-hover,
.btn-slide2 span.title-hover2 {
  right: 80px;
  opacity: 0;
}

.btn-slide span.title-hover,
.btn-slide2 span.title-hover2 {
  color: #fff;
}

Save your template.

Add the Buttons Inside Your Post

Now open a post → switch to HTML View → and add the following code:

<div id="wrap">

  <a href="#" class="btn-slide">
    <span class="circle"><i class="fa fa-rocket"></i></span>
    <span class="title">Preview</span>
    <span class="title-hover">Click to Preview</span>
  </a>

  <a href="#" class="btn-slide2">
    <span class="circle2"><i class="fa fa-download"></i></span>
    <span class="title2">Download</span>
    <span class="title-hover2">Click to Download</span>
  </a>

</div>

You only need to replace # with the actual preview or download link.

Done!
This completes our guide on “How to Add Preview and Download Buttons in Blogger Posts.” See you again in a new tutorial—stay safe! 🙂