Classic Blue CSS Button
Rounded
38 free examples · MIT licensed
Solid CSS Buttons
Solid buttons create a clear visual anchor for the action that matters most. This collection ranges from restrained product UI controls to bold call-to-action treatments, all built in plain CSS.
Primary actionsForms and checkoutSaaS interfaces
Live examples
Copy a solid button
Midnight CSS Button
Rounded
Crimson CSS Button
Rounded
Forest CSS Button
Rounded
Royal Purple CSS Button
Rounded
Amber Punch CSS Button
Rounded
Slate Calm CSS Button
Rounded
Clean White CSS Button
Rounded
Flat Coral CSS Button
Rounded
Ocean Teal CSS Button
Rounded
Ink Sharp CSS Button
Square
Soft Round CSS Button
Rounded
Shadow Lift CSS Button
Rounded
Charcoal CSS Button
Rounded
Sweep Shine CSS Button
Rounded· Shimmer· Hover Reveal
Arrow Nudge CSS Button
Rounded· Icon FX
Arrow Reveal CSS Button
Pill· Icon FX
Grow Pop CSS Button
Rounded
Shrink Press CSS Button
Rounded
Lift Off CSS Button
Rounded
Pulse Ring CSS Button
Pill· Ripple
Shake Alert CSS Button
Rounded· Elastic
Ripple Press CSS Button
Rounded· Ripple
Circle Arrow CSS Button
Circle· Icon FX
Squircle CSS Button
Rounded· Morphing
Parallelo CSS Button
Cut Corner
Chevron Next CSS Button
Cut Corner
Tangerine Pop CSS Button
Rounded
Deep Sea CSS Button
Rounded
Cherry Soda CSS Button
Rounded
Idle Breathe CSS Button
Pill· Animated· Elastic
Barber Pole CSS Button
Rounded· Loading· Animated
Arrow Back CSS Button
Cut Corner
Ribbon Fork CSS Button
Cut Corner
Wave Fill CSS Button
Rounded· Liquid· Hover Reveal
Progress Charge CSS Button
Rounded· Loading· Animated
Success Morph CSS Button
Rounded· Morphing· Icon FX
How to use this collection
Open any example to test its label, size and color against multiple backgrounds. Copy the self-contained CSS when the interaction feels right, then use the matching UI section to find components with compatible contrast, depth and motion.