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
Can I recreate this animated gradient button?

Can I recreate this animated gradient button?

By Kevin Powell
Exclusive
7 Niche React Hooks You Probably Don't Know, But Should

7 Niche React Hooks You Probably Don't Know, But Should

By Web Dev Simplified
Exclusive
How Senior Devs Optimize Images for 10x Faster Page Loads

How Senior Devs Optimize Images for 10x Faster Page Loads

By Web Dev Simplified
TypeScript Branded Types

TypeScript Branded Types

By Web Dev Simplified
Exclusive
Introduction to gRPC

Introduction to gRPC

By Melkey
How To Create A Search Bar In JavaScript

How To Create A Search Bar In JavaScript

By Web Dev Simplified
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
Make an animated glowing border effect with CSS

Make an animated glowing border effect with CSS

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