Free CSS Library · Click to Copy

100 CSS Buttons to Elevate Your Web Design

100 hand-crafted CSS buttons across 10 styles, solid, gradient, glass, neumorphic, animated, neon, icon and creative. Click any button to copy its complete HTML + CSS snippet. Free for any project.

Jump to buttons

#001 Primary Solid

#002 Success Solid

#003 Danger Solid

#004 Warning Solid

#005 Dark Solid

#006 Light Solid

#007 Accent Solid

#008 Pink Solid

#009 Teal Solid

#010 Indigo Solid

#011 Outline Blue Outline

#012 Outline Green Outline

#013 Outline Red Outline

#014 Outline Dark Outline

#015 Outline → Fill Outline

#016 Outline Dashed Outline

#017 Outline Thick Outline

#018 Outline Pill Outline

#019 Outline + Arrow Outline

#020 Outline Glow Outline

#021 Sunset Gradient

#022 Ocean Gradient

#023 Lime Gradient

#024 Purple Haze Gradient

#025 Fire Gradient

#026 Galaxy Gradient

#027 Forest Gradient

#028 Pastel Gradient

#029 Rainbow Anim Gradient

#030 Conic Gradient

#031 Pill Solid Pill

#032 Pill Outline Pill

#033 Pill Arrow Pill

#034 Pill Badge Pill

#035 Pill Split Pill

#036 Pill XL Pill

#037 Pill Shadow Pill

#038 Pill Gradient Pill

#039 Pill Tiny Pill

#040 Pill Emoji Pill

#041 Glass Light Glass

#042 Glass Dark Glass

#043 Glass Blue Glass

#044 Glass Purple Glass

#045 Glass Gradient Glass

#046 Glass Border Glass

#047 Glass + Icon Glass

#048 Glass Strong Glass

#049 Glass Subtle Glass

#050 Frosted Pill Glass

#051 Neu White Neumorphism

#052 Neu Dark Neumorphism

#053 Neu Pressed Neumorphism

#054 Neu Inset Neumorphism

#055 Neu Round Neumorphism

#056 Neu Toggle Neumorphism

#057 Neu Glow Neumorphism

#058 Neu Coloured Neumorphism

#059 Neu Flat Neumorphism

#060 Neu Concave Neumorphism

#061 Fill Slide L Animated

#062 Fill Slide R Animated

#063 Fill Center Animated

#064 Slide Bg Animated

#065 Scale Up Animated

#066 Lift Shadow Animated

#067 Border Draw Animated

#068 Text Slide Up Animated

#069 Underline Animated

#070 Icon Shift Animated

#071 Send Icon

#072 Download Icon

#073 Cart Icon

#074 Heart Icon

#075 Share Icon

#076 Play Icon

#077 Plus Icon

#078 Settings Icon

#079 Search Icon

#080 Menu Icon

#081 Neon Glow Effects

#082 Cyber Effects

#083 Shimmer Effects

#084 Pulse Effects

#085 Bounce Effects

#086 Wobble Effects

#087 Magnetic Effects

#088 Ripple Effects

#089 3D Depth Effects

#090 Loading Effects

#091 Brutalist Creative

#092 Retro 80s Creative

#093 3D Press Creative

#094 Skeuomorphic Creative

#095 Material Creative

#096 Apple Creative

#097 macOS Aqua Creative

#098 Sketchy Creative

#099 Paper Cut Creative

#100 Gradient Text Creative

More free resources

75 CSS Form Designs 60 Hero Section Examples 80 Modern Pricing Tables 50 CSS Spinners & Loaders 40 Footer Designs

How to use

Click. Paste. Ship.

Click any button above. The complete HTML + CSS lands on your clipboard.
Paste anywhere: your CSS file, a Tailwind template, a Framer code component, anywhere.
Rename the class if you want, they're scoped .b1 to .b100 so they won't collide with your stylesheet.
No attribution required: no licence, no signup. Use them in client work, ship them in production.

Built by the team at FindDevs, Australia's #1 network for comparing developer quotes. If you need a real engineer to wire these into a production app, get 3 free quotes →

Copied!