15 CSS Buttons Examples from codepen

If you are struggling in creating a perfect CSS button for your website, you can search for many samples and examples on Google. A simple Google search will find hundreds of buton generator tools and code example. In this post, I am trying to refine you search by adding a collection of extraordinary css buttons available on codepen.io. You can use the CSS and HTML code of those buttons to use on your website.

1. Squishy Toggle Buttons

See the Pen Squishy Toggle Buttons by Justin Windle (@soulwire) on CodePen.

2. Boxy buttons

Cool looking 3D box tyoe buttons.

See the Pen Boxy Buttons by Chris Coyier (@chriscoyier) on CodePen.

3. Minimal Circular 3D Buttons

Awesome circular 3d BUTTONS with cool click effects.

See the Pen Minimal Circular 3D Buttons by Louis Lazaris (@impressivewebs) on CodePen.

4. Pure CSS Button

A very simple example of CSS button

See the Pen Pure CSS3 Button by M Naufal (@pedox) on CodePen.

5. Simple button styles

Few Simple button styles with css

See the Pen Simple Button Styles by Simon Busborg (@simonbusborg) on CodePen.

6. Toggle switch with checkbox:checked

Checkbox switch created purely with CSS

See the Pen Toggle switch with checkbox:checked by Jeroen Franse (@jroenf) on CodePen.

7. 3D Button

Nice black CSS buttin with 3D effects.

See the Pen 3D Button by Joshua Hibbert (@joshnh) on CodePen.

8. Light power button

White CSS button with nice click effect

See the Pen Light power button by Hugo Giraudel (@HugoGiraudel) on CodePen.

9. CSS power button

Power button created with pure CSS

See the Pen CSS power button by Hugo Giraudel (@HugoGiraudel) on CodePen.

10. Pure CSS button switch

Another cool switch like button in css

See the Pen Pure CSS button switch by Hugo Giraudel (@HugoGiraudel) on CodePen.

11. Yes/No button switch

Awesome button for selecting Yes/No. Developed purely with CSS.

See the Pen CSS yes/no button switch by Hugo Giraudel (@HugoGiraudel) on CodePen.

12. Nice button used on QUOTE.fm

Clean button purely designed with CSS to use on QUOTE.fm

See the Pen A nice button we use on QUOTE.fm by Martin Wolf (@martinwolf) on CodePen.

13. Facebook Login Button

Facebook login button created with CSS3. Clicking on button opens a cool login form.

See the Pen Facebook Button / Login Form (Rebound) by Tyler Fry (@frytyler) on CodePen.

14. Progress Bar Button

Progress bar CSS button with cool effects.

See the Pen Progress Bar Button by Stein (@steinvc) on CodePen.

15. Switch Button Single element

Another clean switch button with CSS.

See the Pen Switch Button Single element by M Naufal (@pedox) on CodePen.