Add Glowing Button on Hover Button in Blogger | How to Add Colorful Button using CSS

Hi to all, here I am going to tell you all about how to add colorful glowing on hover button in blogger website easily in just few minutes by using HTML and CSS.

By adding this glowing button, you can attract your website visitors and also it provides a professional look to your website and increase visitor interaction more.

Read the below provided steps carefully and completely to get clear understanding about how to add colorful glowing on hover button in blogger website without any error.

Steps to Add Glowing on Hover Button in Blogger Website

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download theme.

Step-3: Again go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor.

Step-4: Now copy below provided CSS code and paste the copied CSS code above closing head tag or </head> tag.

<style> .glow-on-hover svg{vertical-align: -6px; width: 21px; height: 21px;margin-right:6px} .glow-on-hover{padding:10px 14px;border:none;outline:none;color:#fff;background:#111;cursor:pointer;position:relative;z-index:0;border-radius:6px!important}.glow-on-hover:before{content:'';background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red);position:absolute;top:-2px;left:-2px;background-size:400%;z-index:-1;filter:blur(5px);width:calc(100% + 4px);height:calc(100% + 4px);animation:glowing 20s linear infinite;opacity:0;transition:opacity .3s ease-in-out;border-radius:10px}.glow-on-hover:active{color:#000}.glow-on-hover:active:after{background:0 0}.glow-on-hover:hover:before{opacity:1}.glow-on-hover:after{z-index:-1;content:'';position:absolute;width:100%;height:100%;background:#111;left:0;top:0;border-radius:10px}.home .glow-on-hover:after{background:#1e73be;border-radius:5px}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}100%{background-position:0 0}}@keyframes topBubbles{0%{background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%}50%{background-position:0 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%}100%{background-position:0 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}}@keyframes bottomBubbles{0%{background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%}50%{background-position:0 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%}100%{background-position:0 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%}} </style>
Copy

Step-5: After adding the CSS code, click on save button.

Step-6: Open any one post, where you want to add glowing button on hover.

Step-7: Now click on pencil icon and then change the compose view to HTML view.

Step-8: Copy below provided HTML code and paste the copied HTML code in the post.

<div style="text-align: center;"><a href="#" rel="nofollow noopener"><button class="glow-on-hover" type="button"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> </svg>Download Now</button></a></div>
Copy

Step-9: Here you can change redirection links or downloads files link etc.. and after all modifications, click on publish or update button.

Step-10: You have successfully added glowing button on hover in blogger website easily in just few minutes.

 

Note

If you get any error while saving the code then you need to restore your backup theme code again and need to repeat the same process as provided in the above steps carefully.

If you want to change the style and color of the button then you need to modify CSS code and to change color codes, you need to change the color codes, and for color codes you can use google color picker.

Conclusion

I hope that you have understood about how to add glowing button on hover in blogger website easily in just few minutes by using HTML and CSS.