Home
Blogger
Button

How to add Gradient Hover Effect Buttons in Blogger

OdiVax
Hello! Welcome to OdiCode.

You are looking for How to add Gradient Hover Effect Buttons in Blogger then this post is just for you.
How to add Gradient Hover Effect Buttons in Blogger

Gradient Hover Effect?

Here are the selection of gradient buttons that change the background-color when hovering. You can change the direction of the background change in the :hover state.

You can see the demo here⤵

Gradient Hover Buttons for Blogger

Step 1:  Go to your Blogger Dashboard

Step 2: Go to Theme Click on Drop down arrow and select Edit HTML.

Step 3: Find the <head> tag and paste the given CDN just below it.

Don't worry — the CDN is lightweight, contains no unnecessary code, and is completely safe for your site.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/odivax/Odivax-Cdn@main/Css/Hover-btn.css"/>
Step 4: Now create a new post or edit a existing post to add these Gradient Buttons HTML Code.

Step 5: Click on the Pen icon in the top right corner and switch to HTML View 

Step 6: Now copy and paste the given below Codes.
You just need to try using color-1 by changing the number from 1 to 50. From the demo, whichever button you liked the most, replace the number 1 with that button's number. That's all you need to do.

Please replace # with your actual links.

<button class="btn-hover color-1" onclick="window.open('#')">Button
  
  </button>
Conclusion

We hope you were able to successfully add the Gradient Hover Effect Buttons to your project. If you face any issues or have any questions, feel free to ask us in the comment section below.

Copyright:
OdiCode

Telegram

Post a Comment