Follow us to get updates regarding Latest posts Follow Now!

Advance Buttons With Stylish Hover Effect In Blogger

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.

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

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.

Getting Info...

About the Author

Student | Developer | Blogger

6 comments

  1. i gave it 5 stars 😳

    luv from honglamblog.xyz <33
    1. Thanks for your comment, Your comment made my Day
    2. okay, put me a friend link, i booked it for you
    3. Contact me through Telegram
  2. Thank you so much dude I was literally searching it for 15 days and finally I got this today dude thank you and once again thank you so much brother 😘 Thank u dude
    1. Welcome❤️ Your comment made my day :)
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.