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.
29 free examples, most liked first. Click one to preview it and copy the code.
Flip-Disc Checkbox
by @admin · Buttons
Neon Toggle Switch
by @admin · Buttons
Notification Toggle
by @admin · Buttons
Day/Night theme Switch
by @admin · Buttons
Push Button
by @admin · Buttons
Button
by @admin · Buttons
Switch
by @admin · Buttons
Animated Button
by @admin · Buttons
Button Hover
by @admin · Buttons
Glowing buttons
by @admin · Buttons
Shine Gradient Buttons
by @admin · Buttons
Gradient Button with Animation
by @admin · Buttons
Animation: Buttons Hover
by @admin · Buttons
Button hover with card
by @admin · Buttons
Glowing buttons
by @admin · Buttons
Button Animation
by @admin · Buttons
Button – Shadow Pulse Animation
by @admin · Buttons
Submit Button pure css animation
by @admin · Buttons
Pure css close button animation
by @admin · Buttons
Pastel Animated Buttons (Pure CSS)
by @admin · Buttons
Expanding Pure CSS Button
by @admin · Buttons
Animated Button with Tooltip (Pure CSS)
by @admin · Buttons
Simple Accordion FAQ vanilla CSS
by @admin · Buttons
Button Hover v2 Effect Using Pure CSS
by @admin · Buttons
3D Switch
by @admin · Buttons
Power on/off Button
by @admin · Buttons
Neon Glow buttons
by @admin · Buttons
Stylish Add to cart Button
by @admin · Buttons
Bouncy Button
by @admin · Buttons
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.