10 Code Snippets for creating css buttons

Three Pure CSS Button

3 types of buttons that you can use in your project. You can select a button with a click action, a hover icon, or a glitter when hovering over the mouse.

See the Pen Three Pure CSS Button by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

by Mohammad Abdul Mohaiman


Button Hover States

Various buttons with simple borders, after hovering there are several styles with different fun lines.

See the Pen Button Hover States by James Power (@thejamespower) on CodePen.

By James Power


Flat UI Buttons 2

Classic buttons with a styled action when clicked. Available in blue, green, red, purple, orange and yellow.

See the Pen Flat UI Buttons 2 by Benjamin Gagne (@benague) on CodePen.

By Benjamin Gagne


Button Hover Effects

Clean buttons that have only a border, after hovering several background fill effects happen.

See the Pen Button Hover Effects by Ritchie Jacobs (@ritchiejacobs) on CodePen.

By Ritchie Jacobs


Stylish Social Buttons

Social buttons with various icons and colours depending on the type of the site.

See the Pen Stylish Social Buttons by Chris Deacy (@chrisdothtml) on CodePen.

By Chris Deacy


Button hover effects with box-shadow

Simple hover effects that use the box-shadow property

See the Pen Button hover effects with box-shadow by Giana (@giana) on CodePen.

By Giana


CSS3 Button Hover Effects with FontAwesome

Interesting buttons with action show icons on hover. You can choose either to add an icon to the string, or to completely replace it.

See the Pen CSS3 Button Hover Effects with FontAwesome by fox_hover (@fox_hover) on CodePen.

By fox_hover


Simple CSS Button Hover Effect

The simple effect of doubling the border on the button.

See the Pen Simple CSS Button Hover Effect by Andréas Lundgren (@adevade) on CodePen.

By Andréas Lundgren


CSS Favourite Button

Very nice button to like the content of the page with interesting action after clicking.

See the Pen CSS Favourite Button by Jamie Coulter (@jcoulterdesign) on CodePen.

By Jamie Coulter



10 different styles, where after hovering we can have fun with background, text or line.

See the Pen Buttons by Elie (@eliedim) on CodePen.

By Elie