Demo: CSS Social Buttons

by @nickla, Web Designer Wall (read related article)

Default

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

Sizes

small, default, large

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

Styles

min

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

flat

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

cicle

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

embossed

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

pressed

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

thick-border

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

no-border

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

no-shadow

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

gradient

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

glossy

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

text

Twitter Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo

Colors + Styles

default

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

flat

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

gradient

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

gradient + glossy

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

gradient + glossy + embossed

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

circle + gradient + glossy + embossed

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

circle + no-border + no-shadow

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

flat + text

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

circle + text + thick-border

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

circle + gradient + glossy + text + embossed

Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter Twitter

mix and match

Twitter Facebook Facebook Heart LinkedIn Pinterest Podcast RSS Share Star Vimeo Twitter Heart RSS Vimeo Vimeo Twitter Star

Custom

add icons

YouTube Email YouTube Email

custom icon

Retweet Photo Comment

Download More Icons

The icons used in the demo are from the free Mono Social Icons where you can download from IconDock. The vector EPS version is included in the set. The other matching icons are from the Rocky icon set.