Outline Blue CSS Button
Rounded
24 free examples · MIT licensed
Outline and Ghost CSS Buttons
Outline and ghost buttons preserve hierarchy by keeping secondary actions visible without competing with the primary CTA. The styles here include quiet borders, hover fills and transparent treatments.
Secondary actionsToolbarsImage and gradient backgrounds
Live examples
Copy a outline & ghost button
Outline Dark CSS Button
Rounded
Ghost Slate CSS Button
Rounded
Ghost Accent CSS Button
Rounded
Dashed Craft CSS Button
Rounded
Double Frame CSS Button
Rounded
Bold Stroke CSS Button
Rounded
Underline Slide CSS Button
Square· Slide
Bracket Hint CSS Button
Square· Icon FX
Corner Frame CSS Button
Square· Border FX
Fill Up CSS Button
Rounded· Slide· Hover Reveal
Fill Slide CSS Button
Rounded· Slide· Hover Reveal
Offset Pop CSS Button
Rounded· Border FX
Slide Fill Right CSS Button
Rounded· Slide· Hover Reveal
Slide Fill Up CSS Button
Rounded· Slide· Hover Reveal
Split Center CSS Button
Rounded· Slide· Hover Reveal
Curtain Down CSS Button
Rounded· Slide· Hover Reveal
Border Draw CSS Button
Square· Border FX
Sketch Wobble CSS Button
Organic· Elastic
Blueprint Trace CSS Button
Rounded· Border FX
Inner Glow Line CSS Button
Rounded
Accent Bar CSS Button
Asymmetric
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.