How to add Gradient Hover Effect Buttons in Blogger

Hello Viewers, Welcome to My Site “Shubham Blogging”. I hope all are doing good. So Today I will share some Gradient Hover Effects Button with you. This button makes your site attractive and you can use this button in Blogger.

What is Gradient Hover Effect ?

Effect of Gradient Hover When hovered over, a button’s brilliant colours appear to be attractive. The buttons are cleverly distinguished from the background by the clever use of shadow effects. Overall, the collection of gradient buttons is appealing and clean-looking. All you need to do is choose a design you like and incorporate it into your own.

Here is a list of gradient buttons that, when hovered over, change the backdrop colour. In the hover state, you can alter the direction of the background change. Don’t forget to update the button’s background-color direction after that, and read the entire post.

Steps to Add Gradient Hover Effects Button in Blogger

Step 1 :- In Blogger Dashboard, Go to Theme

Step 2 :- Click on the arrow next to customize button

Step 3 :- Click on Edit HTML

Step 4 :- Search the code ]]></b:skin> and paste the following CSS just above it.

.btn-hover {       width: 200px;    font-size: 16px;    font-weight: 600;    color: #fff;    cursor: pointer;    margin: 20px;    height: 55px;    text-align:center;    border: none;    background-size: 300% 100%;    border-radius: 50px;    moz-transition: all .4s ease-in-out;    -o-transition: all .4s ease-in-out;    -webkit-transition: all .4s ease-in-out;    transition: all .4s ease-in-out;}.btn-hover:hover {    background-position: 100% 0;    moz-transition: all .4s ease-in-out;    -o-transition: all .4s ease-in-out;    -webkit-transition: all .4s ease-in-out;    transition: all .4s ease-in-out;}.btn-hover:focus {    outline: none;}.btn-hover.color-1 {    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);}.btn-hover.color-2 {    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);}.btn-hover.color-3 {    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);}.btn-hover.color-4 {    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);}.btn-hover.color-5 {    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);}.btn-hover.color-6 {    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);}.btn-hover.color-7 {    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);}.btn-hover.color-8 {    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);}.btn-hover.color-9 {    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);}.btn-hover.color-10 {        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);}.btn-hover.color-11 {       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);}

Step 5 :- Now copy the code of button and paste in blogger post in HTML view.

Add your links at #

 
 <button class="btn-hover color-1" onclick="window.open('#')">Button</button>
 
  <button class="btn-hover color-2" onclick="window.open('#')">Button</button>
 
  <button class="btn-hover color-3" onclick="window.open('#')">Button</button>
   <button class="btn-hover color-4" onclick="window.open('#')">Button</button>
  <button class="custom-btn btn-5" onclick="window.open('#')"><span>Read More</span></button> 
  <button class="btn-hover color-6" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-7" onclick="window.open('#')">Button</button> 
      <button class="btn-hover color-8" onclick="window.open('#')">Button</button>
 
 <button class="btn-hover color-9" onclick="window.open('#')">Button</button> 
  <button class="btn-hover color-10" onclick="window.open('#')">Button</button> 
   <button class="btn-hover color-11" onclick="window.open('#')">Button</button> 

Conclusion

In this post I shared you “How to add Gradient Hover Effect Buttons in Blogger“. I hope that you like my post. Please visit our site daily for more new posts. Thankyou for visiting our site.

 

Leave a Comment