Gradient Button

Breakdown

Buttons are one of the most interacted elements on any website. Adding subtle motion and glow effects can turn a simple button into a visually engaging micro-interaction.

In this tutorial, we’ll create a modern glowing hover button using only CSS pseudo-elements and transitions. The effect uses blurred color blobs that move and expand when the user hovers over the button.

No JavaScript required — just CSS magic.

What This Button Animation Does

When a user hovers over the button:

• Color blobs move across the button
• Glow intensity increases
• The underline animation becomes more pronounced
• Border and text colors shift

The result is a soft glowing hover effect that feels modern and interactive.

HTML Structure

The markup is intentionally simple. Each button is just an anchor element.

1<a class="btn custom-button">
2  See more
3</a>
4
5<a href="" class="btn see-more-btn">
6  See more
7</a>

This creates a dark environment where the glowing effects stand out clearly.

Button Base Style

The base button is styled with padding, rounded corners, and a subtle underline.

1.custom-button {
2  position: relative;
3  background-color: #27272a;
4  height: 4rem;
5  width: 16rem;
6
7  border-radius: 0.5rem;
8  overflow: hidden;
9
10  color: #f9fafb;
11  font-size: 1rem;
12  font-weight: bold;
13
14  text-decoration: underline;
15  text-underline-offset: 0.5rem;
16
17  transition: all 0.5s ease;
18}

Creating the Glow with Pseudo Elements

Instead of extra HTML elements, the glowing blobs are created using:

1::before
2::after

These act as decorative layers.

First Glow Layer

1.custom-button::before {
2  content: "";
3  position: absolute;
4  width: 3rem;
5  height: 3rem;
6
7  right: 0.25rem;
8  top: 0.25rem;
9
10  background-color: #8b5cf6;
11  border-radius: 9999px;
12
13  filter: blur(8px);
14  transition: all 0.5s ease;
15}

This creates a purple glowing circle positioned near the top-right corner.

The blur filter turns the circle into a soft light glow.

Second Glow Layer

1.custom-button::after {
2  content: "";
3  position: absolute;
4
5  width: 5rem;
6  height: 5rem;
7
8  right: 2rem;
9  top: 0.75rem;
10
11  background-color: #f43f5e;
12  border-radius: 9999px;
13
14  filter: blur(8px);
15  transition: all 0.5s ease;
16}

This adds a second larger red glow, giving the button a layered lighting effect.

Hover Interaction

When the user hovers the button, several things change.

1.custom-button:hover {
2  color: #fda4af;
3  border-color: #fda4af;
4
5  text-decoration-thickness: 2px;
6  text-underline-offset: 1rem;
7}

This enhances the underline and shifts the text color.

Animated Glow Movement

The glow elements move when hovered.

1.custom-button:hover::before {
2  right: 3rem;
3  bottom: -2rem;
4
5  box-shadow: 20px 20px 20px 30px #a21caf;
6}

This pushes the purple glow across the button and expands its intensity.

Second Glow Animation

1.custom-button:hover::after {
2  right: -2rem;
3}

The red glow slides outward, creating a dynamic light movement.

Blue Variant Button

The second button follows the same structure but uses blue color tones.

1.see-more-btn {
2  background-color: #0369a1;
3}
4
5.see-more-btn:hover {
6  background-color: #7dd3fc;
7  color: #0c4a6e;
8}

The glowing blobs scale and reposition to create a more energetic effect.

Why This Effect Works

This button animation feels modern because it uses:

• layered lighting
• blur-based glow effects
• motion through pseudo-elements
• smooth transitions

All without adding extra DOM elements or JavaScript.

Final Thoughts

Micro-interactions like this can dramatically improve the feel of a website. A simple hover state becomes a visual moment that invites interaction.

By combining CSS blur, pseudo-elements, and transitions, you can create complex UI effects while keeping the code lightweight.

Sometimes the smallest details — like a glowing button — are what make a design feel alive.