Pure CSS Buttons
Pure CSS buttons are buttons styled and animated with HTML and CSS only: gradients, glows, hover effects, ripples and 3D presses without a line of JavaScript.
24 free examples, most liked first. Click one to preview it and copy the code.
Checkbox Toggle Switch
by @admin · Buttons
Text Roll Button
by @admin · Buttons
Neumorphic Press Button
by @admin · Buttons
Gradient Shift Button
by @admin · Buttons
Rolling Wave Button
by @admin · Buttons
Radio Colour Swatches
by @admin · Buttons
Border Trace Button
by @admin · Border
Heart Like Burst Button
by @admin · Buttons
Cut Corner Button
by @admin · Buttons
Lift And Shadow Button
by @admin · Buttons
Mechanical Keycap Button
by @admin · Buttons
Custom Checkbox With appearance: none
by @admin · Buttons
Ghost Button Fill Sweep
by @admin · Buttons
Press Ripple Button
by @admin · Buttons
Click To Fill Progress Button
by @admin · Buttons
Two-Step Confirm Button
by @admin · Buttons
Neon Outline Button
by @admin · Buttons
3D Push Button
by @admin · Buttons
Icon Flip Swap
by @admin · Buttons
Arrow Slide Button
by @admin · Buttons
Before After Toggle
by @admin · Buttons
Shine Sweep Button
by @admin · Buttons
Split Door Reveal Button
by @admin · Buttons
Split Action Button
by @admin · Buttons
Learn how it works
Read the step-by-step guide: CSS Button Hover Effects: 4 Pure CSS Examples You Can Copy
Buttons FAQ
How do I make a CSS button hover effect?
Style the button, then add a :hover rule that changes its background, transform or box-shadow, with a transition for a smooth change. Every example here shows the full code.
How do I use these pure CSS buttons?
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.