The button glowing effect is a visual enhancement that makes buttons stand out and attract attention. It creates the impression that the button is emitting a soft, diffused light, drawing the user’s eye and indicating that the button is interactive or important.
Creating a Button Glowing Effect
Create an HTML button element with classes and apply CSS styles to it. The glow effect is active when the button is hovered over or the mouse button is held down. The following solution combines a gradient effect with animation to enhance the visual experience.
Create a button
*.html
<button class="btn btn-glow">
subscribe
</button>
Create CSS styles
styles.css
.btn {
cursor: pointer;
background-color: #111;
color: white;
padding: 1rem 2rem;
font-size: 2rem;
text-transform: uppercase;
font-weight: bold;
border-radius: 1rem;
border: none;
outline: 0.2rem solid whitesmoke;
}
.btn-glow {
position: relative;
z-index: 1;
}
.btn-glow::before {
content: '';
background: linear-gradient(90deg, #d65c5c, #fcc96b,
#ffb464, #8dfc68, #64ffc8, #5575f5, #b464ff, #ff64c8,#ff6464);
width: calc(100% + 1rem);
height: calc(100% + 1rem);
background-size: 1000%;
position: absolute;
top: -0.4rem;
left: -0.4rem;
border-radius: 1rem;
opacity: 0;
filter: blur(0.2rem);
animation: glow 10s linear infinite;
transition: opacirt 0.3s ease-in-out;
z-index: -1;
}
.btn-glow:active::after {
background: transparent;
}
.btn-glow:hover::before {
opacity: 1;
}
.btn-glow::after {
content: '';
background: #111;
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
border-radius: 1rem;
z-index: -1;
}
@keyframes glow {
0% {background-position: 0 0;}
50% {background-position: 100% 0;}
100% {background-position: 0 0;}
}