In this article I have made a tutorial on Advance Buttons With Stylish Hover Effect In Blogger

Hello Guys ! Welcome Back to Techy DarshaN Toady our tutorial is about Advance Buttons With Stylish Hover Effect In Blogger.

Pros :

1. New Stylish Look
2. Increase Button Visibility
3. Attractive Hover Effects 
4. Change your old Buttons to this New Buttons

So Let's Begin

Advance Buttons With Stylish Hover Effect In Blogger : 

Step 1 : Go to Blogger's Dashboard

Step 2 : Go to Theme and Edit HTML 

Step 3 : Then search ]]></b:skin>

Step 4 : Copy and paste the give below CSS Above the ]]></b:skin>

 @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 5 : After adding the CSS Create a new Post/Page or Edit a Post/Page  where you wanna add this These Buttons 

Step 6 : Go to HTML View 

Step 7 : Now copy and paste HTML button codes below 

  
  <div class="button button-1"target="blank" title="Techy DarshaN" onclick="window.open('https://www.techydarshan.eu.org/')">Neon</div>
  <div class="button button-2" target="blank" title="Techy DarshaN" onclick="window.open('https://www.techydarshan.eu.org/')">Angle bg</div>
  <div class="button button-3" target="blank" title="Techy DarshaN" onclick="window.open('https://www.techydarshan.eu.org/')">Shadow</div>
  <div class="button button-4"target="blank" title="Techy DarshaN" onclick="window.open('https://www.techydarshan.eu.org/')">Pulse</div>
  <div class="button button-5"target="blank" title="Techy DarshaN" onclick="window.open('https://www.techydarshan.eu.org/')">Gradient</div>

Step 8 : After adding the above Button codes to your post Change my Link your Link and also change the Title.

Conslusion :

In this post we have talked about Advance Buttons With Stylish Hover Effect In Blogger. Hope you have liked it and tell us your opinion and if have any Questions you can ask it through the comment section or Contact me or Join our Telegram Group for Discussion.