Hello! Welcome to Action CodeD.
You are looking for Glowing Download Button then this post is just for you.
Glowing Download Button
Step 1: Login to your Blogger Dashboard
Step 2: In Blogger, create a post or page and insert the code shown below.
Step 3: Copy and paste the following code into Blogger's blog Post.
<head>
<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>
<div style="text-align: center;"><a href="URL_HERE" 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>
Conclusion
I hope you have successfully added your Glowing Download Button. If you are facing any problem in any section or you have any question then ask us in the comment box.
Copyright:
