Shazam button morphing effect

A simple tutorial by Codrops that shows you how to create a Shazam-like morphing button effect with few lines of HTML and CSS.

Shazam button morphing effect

Flipside - Button to modal

Flipside is a button that seamlessly transitions from action to confirmation created with few lines of CSS and jQuery.

Flipside – Button to modal

Button styles inspiration

A collection of fresh button styles and effects for your inspiration, built with CSS transitions and pseudo-elements for most of the effects. Coded by Codrops.

Button styles inspiration

Progress button styles

Here are some interesting snippets for creating 3D progress button styles where the button itself serves as a progress indicator.

Progress button styles

Download button PSD + CSS

Today’s freebie is a simple but beautiful download button designed with Photoshop and ready coded. Free PSD CSS released by Jan Erik Waider.

Download button PSD + CSS

Creative buttons effects CSS

Today’s CSS snippet from Codrops is a set of awesome effects for buttons. The effects can be seen when hovering on and clicking on.

Creative buttons effects CSS

Pure CSS flat switches

Some pure CSS flat-style switches with nice structure and animations. CSS snippet coded by DesignitCodeit.

Pure CSS flat switches

Pure CSS radio buttons

Some pure CSS flat radio buttons with a really nice animation. Code snippet created by DesignitCodeit.

Pure CSS radio buttons

CSS animated Twitter button

Lovely CSS snippet! Bennett Feely has coded with some lines of HTML and CSS the popular Twitter animated button designed by Erik Deiner.

CSS animated Twitter button

CSS3 buttons

Using subtle patterns is kinda cool so someone thought why not using them on buttons? The idea was to create nice CSS3 patterned buttons.

CSS3 patterned buttons

Social share css snippet

Share it is a share button: when you hover it, a tooltip with four social links appears. CSS snippet.

Share it! CSS snippet