The Reason Why Everyone Love Download Button Add In Blogger.

Hello Friends, today you learn that how you can add attractive demo or download or YouTube video watch button in your blogger website.

following are steps to add download or demo button in your website.
1. Go to your blogger.

2. go to theme section or click edit html button.

3. Paste below code before </style> code give below code box.

4. Now click save theme button.

5. Now go to post. After create new post, paste below code in html section for add demo or download button:-

6. For add YouTube button paste below code

Css Code 👇

#firsttechinfo {
margin: 20px auto;
text-align: center;
}
#firsttechinfo br {
display: none;
}
.firsttechinfoar{
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid orange;
margin: 10px;
transition: .5s;
}
.firsttechinfoar:hover {
background-color: orange;
}
.firsttechinfoar:hover span.circle{
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: orange;
}
.firsttechinfoar:hover span.title{
left: 40px;
opacity: 0;
}
.firsttechinfoar:hover span.title-hover{
opacity: 1;
left: 40px;
}
.firsttechinfoar span.circle{
display: block;
background-color: orange;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.firsttechinfoar span.title,
.firsttechinfoar span.title-hover{
position: absolute;
left: 90px;
text-align: center; 
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: orange;
transition: .5s;
}
.firsttechinfoar span.title-hover{
left: 80px;
opacity: 0;
}
.firsttechinfoar span.title-hover{
color: #fff;
}
.firsttechinfoar1{
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid blue;
margin: 10px;
transition: .5s;
}
.firsttechinfoar1:hover {
background-color: blue;
}
.firsttechinfoar1:hover span.circle{
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: blue;
}
.firsttechinfoar1:hover span.title{
left: 40px;
opacity: 0;
}
.firsttechinfoar1:hover span.title-hover{
opacity: 1;
left: 40px;
}
.firsttechinfoar1 span.circle{
display: block;
background-color: blue;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.firsttechinfoar1 span.title,
.firsttechinfoar1 span.title-hover{
position: absolute;
left: 90px;
text-align: center; 
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: blue;
transition: .5s;
}
.firsttechinfoar1 span.title-hover{
left: 80px;
opacity: 0;
}
.firsttechinfoar1 span.title-hover{
color: #fff;
}
.firsttechinfoar2{
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid red;
margin: 10px;
transition: .5s;
}
.firsttechinfoar2:hover {
background-color: red;
}
.firsttechinfoar2:hover span.circle{
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: red;
}
.firsttechinfoar2:hover span.title{
left: 40px;
opacity: 0;
}
.firsttechinfoar2:hover span.title-hover{
opacity: 1;
left: 40px;
}
.firsttechinfoar2 span.circle{
display: block;
background-color: red;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.firsttechinfoar2 span.title,
.firsttechinfoar2 span.title-hover{
position: absolute;
left: 90px;
text-align: center; 
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: red;
transition: .5s;
}
.firsttechinfoar2 span.title-hover{
left: 80px;
opacity: 0;
}
.firsttechinfoar2 span.title-hover{
color: #fff;
}

Download and demo button code 👇

YouTube button code 👇

The Reason Why Everyone Love Download Button Add In Blogger.

How To Forward Sms Form Your Target Device Using Application

How To Host Phishing Page Using Php Server in Termux

How to use ngrok in termux

How to install ngrok in termux

Contact Form

The Reason Why Everyone Love Download Button Add In Blogger.

You might like

Contact Form