How To Add Demo And Download Button In Blogger Post

So Friends! Today In This Article We Are Going To Talk About Adding Stylish Demo And Download Slider Button In Blogger.

So We Will Know All These Things In This Article. So Stay Here I'll Teach You With Full Details And Demo.

Step 1 : Adding HTML Code Of Demo And Download Button

So Now You Have To First Open Your Blogger Dashboard,

Then You Have To Go To Theme>Edit HTML, And Search For </head>,

Then Paste The Code Given Below Before </head> Tag And Click On Save Button.

Double Click To Copy This HTML :

Step 2 : Adding CSS Code Of Demo And Download Buttons

In The Second Step, You Have To Add CSS To Your Blogger Template For Both Buttons,

Again You Have To Click On Theme>Edit Theme And Search For ]]></b:skin>,

Then Paste The CSS Given Below Before

]]></b:skin> Tag.

Double Click To Copy This CSS :

/* CSS Demo And Download Buttons By Techno Krrish*/
.bie-slide,
 .bie-slide2 {
  position: relative;
  display: inline-block;
  height: 55px;
  width: 200px;
  line-height: 50px;
  padding: 0;
  border-radius: 50px;
  background: #fdfdfd;
  border: 2px solid #f84f4f;
  margin: 10px;
  transition: all 0.5s ease-in-out;
 }
 .bie-slide2 {
  border: 2px solid #36D7B7;
 }
 .bie-slide:hover {
  background-color: #f84f4f;
 }
 .bie-slide2:hover {
  background-color: #36D7B7;
 }
 .bie-slide:hover span.circle,
 .bie-slide2:hover span.circle2 {
  left: 100%;
  margin-left: -45px;
  background-color: #fdfdfd;
  color: #f84f4f;
 }
 .bie-slide2:hover span.circle2 {
  color: #36D7B7;
 }
 .bie-slide:hover span.title,
 .bie-slide2:hover span.title2 {
  left: 40px;
  opacity: 0;
 }
 .bie-slide:hover span.title-hover,
 .bie-slide2:hover span.title-hover2 {
  opacity: 1;
  left: 40px;
 }
 .bie-slide span.circle,
 .bie-slide2 span.circle2 {
  display: block;
  background-color: #f84f4f;
  color: #fff;
  position: absolute;
  float: left;
  margin: 5px;
  line-height: 42px;
  height: 40px;
  width: 40px;
  top: 0;
  left: 0;
  transition: .5s;
  border-radius: 50%;
 }
 .bie-slide2 span.circle2 {
  background-color: #36D7B7;
 }
 .bie-slide span.title,
 .bie-slide span.title-hover,
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  position: absolute;
  left: 90px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #f84f4f;
  transition: .5s;
 }
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  color: #36D7B7;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  left: 80px;
  opacity: 0;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  color: #fff;

How To Add Demo And Download Button In Blogger Post

Step 1 : Adding HTML Code Of Demo And Download Button

Step 2 : Adding CSS Code Of Demo And Download Buttons

Step 3 : Adding HTML Portion To Blogger Posts

For Demo Button

For Download Button

Contact Form