Can I recreate this animated gradient button?

Kevin Powell
Kevin Powell
YouTube
Creative Coding CSS
January 14, 2026

Watch me try to recreate a fun gradient button effect.

🔗 Links
Completed Code: https://codepen.io/kevinpowell/pen/ZYOWqJJ
CSS CSS
View more
:has() is more than a parent selector

:has() is more than a parent selector

By Kevin Powell
2 reasons you should be using single color gradients in CSS

2 reasons you should be using single color gradients in CSS

By Kevin Powell
5 CSS Secrets every developer should know

5 CSS Secrets every developer should know

By Kevin Powell
A CSS Trick to select a specific row with Grid auto-fit/fill

A CSS Trick to select a specific row with Grid auto-fit/fill

By Kevin Powell
Advanced CSS Dev Tools

Advanced CSS Dev Tools

By Web Dev Simplified
Advanced selections with CSS combinators

Advanced selections with CSS combinators

By Kevin Powell
Animate height: auto with interpolate-size and calc-size()

Animate height: auto with interpolate-size and calc-size()

By Kevin Powell
Breakpoint-Free CSS Grid Layouts

Breakpoint-Free CSS Grid Layouts

By Kevin Powell
Build smarter color systems with CSS relative colors

Build smarter color systems with CSS relative colors

By Kevin Powell
Can I clone this rotating, gradient, inner glow effect?

Can I clone this rotating, gradient, inner glow effect?

By Kevin Powell
Creative Coding Creative Coding
View more
2 reasons you should be using single color gradients in CSS

2 reasons you should be using single color gradients in CSS

By Kevin Powell
5 CSS Secrets every developer should know

5 CSS Secrets every developer should know

By Kevin Powell
Animate height: auto with interpolate-size and calc-size()

Animate height: auto with interpolate-size and calc-size()

By Kevin Powell
Create a clean, modern navigation with HTML & CSS

Create a clean, modern navigation with HTML & CSS

By Kevin Powell
Exclusive
Create a Frosted Glass Effect with a Gradient Border

Create a Frosted Glass Effect with a Gradient Border

By Kevin Powell
Create a navigation blob that tracks your mouse with CSS-only

Create a navigation blob that tracks your mouse with CSS-only

By Kevin Powell
Directionally aware button effect without JavaScript

Directionally aware button effect without JavaScript

By Kevin Powell
Exclusive
Full-screen, Animated Navigation Menu

Full-screen, Animated Navigation Menu

By Kevin Powell
Make an animated glowing border effect with CSS

Make an animated glowing border effect with CSS

By Kevin Powell
Quick & Easy Theme Transitions

Quick & Easy Theme Transitions

By Kevin Powell
Latest
View more
How To Create An Animated Image Carousel With CSS/JavaScript

How To Create An Animated Image Carousel With CSS/JavaScript

By Web Dev Simplified
Learn Intersection Observer In 15 Minutes

Learn Intersection Observer In 15 Minutes

By Web Dev Simplified
Mutation Observer Is Unbelievably Powerful

Mutation Observer Is Unbelievably Powerful

By Web Dev Simplified
This Simple Trick Makes Your Website Better Looking

This Simple Trick Makes Your Website Better Looking

By Web Dev Simplified
How To Create A Search Bar In JavaScript

How To Create A Search Bar In JavaScript

By Web Dev Simplified
Stop Wasting Your Time - Use These 16 JS Utility Functions Instead

Stop Wasting Your Time - Use These 16 JS Utility Functions Instead

By Web Dev Simplified
Learn Debounce And Throttle In 16 Minutes

Learn Debounce And Throttle In 16 Minutes

By Web Dev Simplified
How To Send Push Notifications With JavaScript

How To Send Push Notifications With JavaScript

By Web Dev Simplified
How To Load Images Like A Pro

How To Load Images Like A Pro

By Web Dev Simplified
Go Concurrency Explained: Go Routines & Channels

Go Concurrency Explained: Go Routines & Channels

By Melkey
Popular
View more
Auth & backend so simple even this CSS dev gets it

Auth & backend so simple even this CSS dev gets it

By Kevin Powell
Conditional Rendering with React Activity

Conditional Rendering with React Activity

By Web Dev Simplified
5 CSS Secrets every developer should know

5 CSS Secrets every developer should know

By Kevin Powell
NEW Tanstack AI Library is Amazing!

NEW Tanstack AI Library is Amazing!

By Web Dev Simplified
Exclusive
Master CSS Custom Properties

Master CSS Custom Properties

By Kevin Powell
The magic of auto-fit and auto-fill

The magic of auto-fit and auto-fill

By Kevin Powell
Exclusive
How to Use React Compiler for 100% Faster Apps

How to Use React Compiler for 100% Faster Apps

By Web Dev Simplified
Exclusive
Learn Advanced React Hooks In 35 Minutes

Learn Advanced React Hooks In 35 Minutes

By Web Dev Simplified
Exclusive
JavaScript Promises from Scratch

JavaScript Promises from Scratch

By Maximiliano Firtman
Exclusive
Your First Web Component

Your First Web Component

By Maximiliano Firtman