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.
41 free examples, most liked first. Click one to preview it and copy the code.
Neumorphic Press Button
by @admin · Buttons
Checkbox Toggle Switch
by @admin · Buttons
Text Roll Button
by @admin · Buttons
Border Trace Button
by @admin · Border
Gradient Shift Button
by @admin · Buttons
Cut Corner Button
by @admin · Buttons
Rolling Wave Button
by @admin · Buttons
Mechanical Keycap Button
by @admin · Buttons
Billing Period Toggle
by @admin · Buttons
Notification Toggle Switch
by @admin · Buttons
Heart Like Burst Button
by @admin · Buttons
3D Push Button
by @admin · Buttons
Arrow Slide Button
by @admin · Buttons
Before After Toggle
by @admin · Buttons
Press And Hold Button
by @admin · Buttons
Day Night Toggle Scene
by @admin · Buttons
3D Toggle Switch
by @admin · Buttons
Radio Colour Swatches
by @admin · Buttons
Ghost Button Fill Sweep
by @admin · Buttons
Press Ripple Button
by @admin · Buttons
Neon Outline Button
by @admin · Buttons
Icon Flip Swap
by @admin · Buttons
Brutalist Offset Button
by @admin · Buttons
Power Button
by @admin · Buttons
Frosted Glass Buttons
by @admin · Buttons
Bouncy Offers Button
by @admin · Buttons
Custom Checkbox With appearance: none
by @admin · Buttons
Lift And Shadow Button
by @admin · Buttons
Pulse Ring CTA Button
by @admin · Buttons
Speed Dial Floating Button
by @admin · Buttons
Notification Bell Button
by @admin · Buttons
Colour Dot Picker
by @admin · Buttons
Two-Step Confirm Button
by @admin · Buttons
Click To Fill Progress Button
by @admin · Buttons
Split Door Reveal Button
by @admin · Buttons
Split Action Button
by @admin · Buttons
Radio Size Picker
by @admin · Buttons
Quantity Counter Pill
by @admin · Buttons
Shine Sweep Button
by @admin · Buttons
Social Icon Slide Buttons
by @admin · Buttons
Glow Frame Add To Cart 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.