Gradient CSS buttons
A gradient is the fastest way to make a call to action stand out. Every button here uses a pure CSS linear-gradient() or radial-gradient() background, so it stays sharp at any size and weighs a few hundred bytes.
Get started
Get started
Dive in
Say hello
Start free
Reserve
Book a trip
Get the app
Add to cart
Start free trial
Explore
Continue
Try it
Launch
Tips for gradient CSS buttons
Keep gradients between neighbouring hues (purple to pink, cyan to blue) so they look smooth instead of muddy. Add a soft shadow in the same colour as the gradient for a glow that feels part of the button. Check text contrast at the lightest end of the gradient, not just the middle.
Click any button above to get its CSS and HTML, or open the editor to tune the colours, font, shadows and hover animation and copy your own version.