40+ CSS Buttons from codepen
Written by Saran on
January 28, 2013,
Updated
October 11, 2018Finding that perfect CSS button isn't hard these days, just Google and you will end-up with many CSS button generators, all you need to do is copy and paste the code. But if you are looking for some extraordinary CSS buttons, or perhaps inspirations, there's no other places like codepen.io, here are some 40+ CSS button examples I've picked from Codepen. Please bear with page loading if you have slow net connection.
If you are looking from more examples, here's
40 more CSS3 button examples from codepen, cssdeck and jsfiddle.
Button Tooltips
Button example showcase tooltip on mouse hover.
Check out this Pen!
Pure CSS Badges
Pure CSS Badges with nice hover effect that glows.
Check out this Pen!
CSS-only responsive buttons
Responsive buttons that can adjust according to browser size.
Check out this Pen!
Boxy Buttons
Cool looking Box type buttons.
Check out this Pen!
Buttons with Alt
Another tool tip CSS button.
Check out this Pen!
Scss/compass animated button
Cool looking compass like animated button.
Check out this Pen!
Minimal Circular 3D Buttons
Simple but very cool Minimal Circular buttons.
Check out this Pen!
Pure CSS button
Simple useful CSS button.
Check out this Pen!
Windows 8 Metro
Awesome windows 8 type buttons purely with CSS
Check out this Pen!
Button Styles
Nice looking SCSS buttons.
Check out this Pen!
Toggle switch with checkbox:checked
A big black switch created purely with CSS
Check out this Pen!
Twitter Share Button
A Simple Twitter button
Check out this Pen!
Simple CSS3 Button
Simple CSS3 Signup button created with LESS
Check out this Pen!
CSS Button
Nice button created with SASS
Check out this Pen!
Aqua button
Aqua Button with CSS
Check out this Pen!
3D Button
Nice black CSS 3D button.
Check out this Pen!
Light power button
White CSS power button.
Check out this Pen!
Arcade Button
Arcade button created with CSS.
Check out this Pen!
CSS power button
CSS Power button in Red.
Check out this Pen!
CSS Login Button
A login button with nice hover CSS3 transitions effect.
Check out this Pen!
Pure CSS button switch
Awesome white switch button.
Check out this Pen!
BERG Cloud Buttons
BERG Cloud Buttons in CSS.
Check out this Pen!
3D-ish Button
Simple CSS button in 3D style.
Check out this Pen!
3D CSS3 Button
Another Boxed shaped CSS button.
Check out this Pen!
Yes/No button switch
Awesome looking Yes/No Switch button, created purely with CSs.
Check out this Pen!
CSS only close button
A simple CSS close button, nothing fancy.
Check out this Pen!
Sign in Instagram Button
Instagram sign in button with CSS.
Check out this Pen!
QUOTE.fm button
A clean looking CSS button used by QUOTE.fm.
Check out this Pen!
Tuenti button interaction
A simple CSS button created with CSS and JS.
Check out this Pen!
CSS3 Button Framework
Another Classic type CSS buttons.
Check out this Pen!
Themeable Smurf Pill Button
Nice looking 3D Pill Button in CSS.
Check out this Pen!
Dirty CSS3 Button
Black CSS button.
Check out this Pen!
CSS3 Animated Button/Key
Nice looking boxed shaped CSS button with hover effect.
Check out this Pen!
SASS Mixin Button
CSS button in different colors.
Check out this Pen!
Facebook Login Button
Very nicely created Facebook login button with CSS3.
Check out this Pen!
Twitter Button Concept
Awesome CSS twitter concept button.
Check out this Pen!
CSS Flat Button Shapes
Different types of simple CSS buttons.
Check out this Pen!
Progress Bar Button
Progress bar type CSS button, very neatly done.
Check out this Pen!
Switch Button Single element
Nice and clean switch button with CSS.
Check out this Pen!
CSS3 Soft Button
Soft rounded button created with CSS.
Check out this Pen!
Pressable, iOS Compatible CSS Button
Another boxed type CSS button.
Check out this Pen!
Switch Button
Another CSS3 switch that changes background on click.
Check out this Pen!
Rounded button with arrow
Simple rounded button with arrow.
Check out this Pen!
Vacuum Tube Button
Awesome PURE CSS tube buttons with some PNG backgrounds.
Check out this Pen!
Gradient Mixin
Another simple CSS button with gradient effect.
Check out this Pen!
Red Panic Button
Red CSS panic button, created with CSS and JS.
Check out this Pen!
Twitter Sign-in Button
CSS Scalable Twitter sign-in button.
Check out this Pen!
Simple Delete Cancel button
Simple CSS Delete and Cancel button
Check out this Pen!
Smurf Pill Button
Another huge CSS Pill Button.
Check out this Pen!
