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. The following solution combines a shadow with animation.

Create a button

*.html

<button class="btn btn-glow">
  subscribe
</button>

Create CSS styles

styles.css

.btn {
    cursor: pointer;
    background-color: #ff6b6b;
    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 {
    box-shadow: 0 0 0.5rem rgba(255, 107, 107, 0.7), 
    0 0 1rem rgba(255, 107, 107, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}

.btn-glow:hover {
    box-shadow: 0 0 2rem rgba(255, 107, 107, 0.7), 
    0 0 4rem rgba(255, 107, 107, 0.5);
}