Hello Everyone! Welcome to FreemiumTech Website. Today our tutorial is How to Add Advance Buttons With Stylish Hover Effect In Blogger Post? You Guys already know very well that The beautiful download button Enhances post beauty. Every blogger wants to give the best looking post so that can attract the users attentions. So without farther any delay lets begin the post.
Benefit of it’s
- New Stylish Look.
- Increase Button Visibility
- Attractive Hover Effects
- Change your old Buttons to this New Buttons.
How to Add Advance Buttons With Stylish Hover Effect In Blogger Post?
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On your Blogger Dashboard, click 'Theme'.
Step 3: Click on the arrow down icon next to 'customize' button.
Step 4: Click on Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
@import: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
.container {
text-align: center;
}
h1 {
margin-left: 30px;
margin-bottom: 50px;
}
.button {
width: 140px;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
color: #000;
text-transform: uppercase;
font-weight: 300;
margin-left: 15px;
margin-bottom: 15px;
cursor: pointer;
display: inline-block;
}
.button-1 {
background-color: transparent;
border: 3px solid #00d7c3;
border-radius: 50px;
-webkit-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
color: #00d7c3;
}
.button-1:hover {
box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
border: 3px solid #00d7c3;
}
.button-2 {
color: #fff;
border: 3px solid #c266d3;
background-color: #fff;
background-image: -webkit-linear-gradient(30deg, #c266d3 50%, transparent 50%);
background-image: linear-gradient(30deg, #c266d3 50%, transparent 50%);
background-size: 500px;
background-repeat: no-repeat;
background-position: 0%;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.button-2:hover {
background-position: 100%;
color: #c266d3;
}
.button-3 {
border: 2px solid #3c73ff;
background-color: #3c73ff;
border-radius: 20px;
color: #fff;
transition: .3s;
}
.button-3:hover {
box-shadow: 8px 8px #99bdff;
transition: .3s;
}
.button-4 {
background-color: transparent;
border: 3px solid #ff0251;
color: #ff0251;
transition: .3s;
}
.button-4:hover {
animation: pulse 1s infinite;
transition: .3s;
}
@keyframes pulse {
0% {
transform: scale(1);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.button-5 {
width: 150px;
border-radius: 5px;
background-color: #F4F200;
background-image: #F4F200;
background-image: -moz-linear-gradient(top, #fff 0%, #F4F200 100%);
background-image: -webkit-linear-gradient(top, #fff 0%,#F4F200 100%);
background-image: linear-gradient(to bottom, #fff 0%,#F4F200 100%);
background-size: 300px;
background-repeat: no-repeat;
background-position: 0%;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.button-5:hover {
background-position: -200%;
transition: background 300ms ease-in-out;
}
Step 6 : After adding the CSS Create a new Post/Page or Edit a Post/Page where you wanna add this These Buttons
Step 7 : Go to HTML View
Step 8 : Now copy and paste HTML button codes below
<div class="button button-1"target="blank" title="Freemium Tech" onclick="window.open('https://freemiumtech.blogspot.com')">Neon</div>
<div class="button button-2" target="blank" title="Freemium Tech" onclick="window.open('https://freemiumtech.blogspot.com')">Angle bg</div>
<div class="button button-3" target="blank" title="Freemium Tech" onclick="window.open('https://freemiumtech.blogspot.com')">Shadow</div>
<div class="button button-4"target="blank" title="Freemium Tech" onclick="window.open('https://freemiumtech.blogspot.com')">Pulse</div>
<div class="button button-5"target="blank" title="Freemium Tech" onclick="window.open('https://freemiumtech.blogspot.com')">Gradient</div>
Step 9 : After adding the above Button codes to your post Change my Link your Link and also change the Title.
Conclusion
In this article I have made a tutorial on How to Add Advance Buttons With Stylish Hover Effect In Blogger Post. These Stylish Button which are very Mobile responsive and attractive to drive the users attention. These stylish Button give a better look to your post. I Hope you have liked this article and if you like it so please do share with your friends and follow us blog for more.
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.