Animated Glowing Button Hover Effect CSS | with Live Gradient

Animated Glowing Button Hover Effect CSS

In this tutorial video, you will learn how to create animated glowing live gradient effect on hover. This hover animation will look like gradient neon with shiny live gradient rotation.

Music credit:
Creative Commons — Attribution 3.0 Unported — CC BY 3.0

[jona]

Why don't you post/ publish the code anywhere? Now I have to type everything one by one...

[leonardofukuje]

I've just met your channel and I'm really in love with all these features, thank you so much

[deathcrafter]

where the f is the glow? please don't make false titles and thumbnails

[reymarpabito]

Hello can you please fix this elementor code? The button icon is not showing

/*Start of Custom Button Styles*/
.glowing-button .elementor-button {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #0aefff 0%, #147df5 40%, #be0aff 100%);
}
.glowing-button .elementor-button::before, .glowing-button .elementor-button::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
border-radius: 20px;
background: linear-gradient(45deg, #fb0094, #00f, #0f0, #ff0, #f00, #fb0094, #00f, #0f0, #ff0, #f00);
background-size: 200vw;
animation: gradient 5s linear infinite;
opacity: 0;
visibility: hidden;
}
@keyframes gradient {
0% {
background-position-x: 0 0;
}
100% {
background-position-x: 200vw;
}
}
.glowing-button .elementor-button:hover::before, .glowing-button {
opacity: 1;
visibility: visible;
}
.glowing-button {
filter: blur(20px);
}
.glowing-button .elementor-button span {
z-index: 10;
}
.glowing-button .elementor-button span::before {
content: '';
position: absolute;
width: calc(100% - 10px);
height: calc(100% - 10px);
background-color: transparent;
z-index: -1;
top: 5px;
left: 5px;
border-radius: 20px;
}
.glowing-button .elementor-button:hover span::before {
background-color:
}
/*End of Custom Button Styles*/