40+ CSS Buttons from codepen

Finding 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.
  • 1
Check out this Pen!

Pure CSS Badges

Pure CSS Badges with nice hover effect that glows.
  • 1
Check out this Pen!

CSS-only responsive buttons

Responsive buttons that can adjust according to browser size.
  • 1
Check out this Pen!

Boxy Buttons

Cool looking Box type buttons.
  • 1
Check out this Pen!

Buttons with Alt

Another tool tip CSS button.
  • 1
Check out this Pen!

Scss/compass animated button

Cool looking compass like animated button.
  • 1
Check out this Pen!

Minimal Circular 3D Buttons

Simple but very cool Minimal Circular buttons.
  • 1
Check out this Pen!

Pure CSS button

Simple useful CSS button.
  • 1
Check out this Pen!

Windows 8 Metro

Awesome windows 8 type buttons purely with CSS
  • 1
Check out this Pen!

Button Styles

Nice looking SCSS buttons.
  • 1
Check out this Pen!

Toggle switch with checkbox:checked

A big black switch created purely with CSS
  • 1
Check out this Pen!

Twitter Share Button

A Simple Twitter button
  • 1
Check out this Pen!

Simple CSS3 Button

Simple CSS3 Signup button created with LESS
  • 1
Check out this Pen!

CSS Button

Nice button created with SASS
  • 1
Check out this Pen!

Aqua button

Aqua Button with CSS
  • 1
Check out this Pen!

3D Button

Nice black CSS 3D button.
  • 1
Check out this Pen!

Light power button

White CSS power button.
  • 1
Check out this Pen!

Arcade Button

Arcade button created with CSS.
  • 1
Check out this Pen!

CSS power button

CSS Power button in Red.
  • 1
Check out this Pen!

CSS Login Button

A login button with nice hover CSS3 transitions effect.
  • 1
Check out this Pen!

Pure CSS button switch

Awesome white switch button.
  • 1
Check out this Pen!

BERG Cloud Buttons

BERG Cloud Buttons in CSS.
  • 1
Check out this Pen!

3D-ish Button

Simple CSS button in 3D style.
  • 1
Check out this Pen!

3D CSS3 Button

Another Boxed shaped CSS button.
  • 1
Check out this Pen!

Yes/No button switch

Awesome looking Yes/No Switch button, created purely with CSs.
  • 1
Check out this Pen!

CSS only close button

A simple CSS close button, nothing fancy.
  • 1
Check out this Pen!

Sign in Instagram Button

Instagram sign in button with CSS.
  • 1
Check out this Pen!

QUOTE.fm button

A clean looking CSS button used by QUOTE.fm.
  • 1
Check out this Pen!

Tuenti button interaction

A simple CSS button created with CSS and JS.
  • 1
Check out this Pen!

CSS3 Button Framework

Another Classic type CSS buttons.
  • 1
Check out this Pen!

Themeable Smurf Pill Button

Nice looking 3D Pill Button in CSS.
  • 1
Check out this Pen!

Dirty CSS3 Button

Black CSS button.
  • 1
Check out this Pen!

CSS3 Animated Button/Key

Nice looking boxed shaped CSS button with hover effect.
  • 1
Check out this Pen!

SASS Mixin Button

CSS button in different colors.
  • 1
Check out this Pen!

Facebook Login Button

Very nicely created Facebook login button with CSS3.
  • 1
Check out this Pen!

Twitter Button Concept

Awesome CSS twitter concept button.
  • 1
Check out this Pen!

CSS Flat Button Shapes

Different types of simple CSS buttons.
  • 1
Check out this Pen!

Progress Bar Button

Progress bar type CSS button, very neatly done.
  • 1
Check out this Pen!

Switch Button Single element

Nice and clean switch button with CSS.
  • 1
Check out this Pen!

CSS3 Soft Button

Soft rounded button created with CSS.
  • 1
Check out this Pen!

Pressable, iOS Compatible CSS Button

Another boxed type CSS button.
  • 1
Check out this Pen!

Switch Button

Another CSS3 switch that changes background on click.
  • 1
Check out this Pen!

Rounded button with arrow

Simple rounded button with arrow.
  • 1
Check out this Pen!

Vacuum Tube Button

Awesome PURE CSS tube buttons with some PNG backgrounds.
  • 1
Check out this Pen!

Gradient Mixin

Another simple CSS button with gradient effect.
  • 1
Check out this Pen!

Red Panic Button

Red CSS panic button, created with CSS and JS.
  • 1
Check out this Pen!

Twitter Sign-in Button

CSS Scalable Twitter sign-in button.
  • 1
Check out this Pen!

Simple Delete Cancel button

Simple CSS Delete and Cancel button
  • 1
Check out this Pen!

Smurf Pill Button

Another huge CSS Pill Button.
  • 1
Check out this Pen!
New question is currently disabled!