A Pen by Andor Nagy.

14-Flat-Social-Buttons-with-CSS.markdown

14 Flat Social Buttons with CSS

The markup and styling of 14 social sharing buttons.

A Pen by Andor Nagy on CodePen.

License.

index.html

<a class="button facebook" href="#">Facebook</a>
<a class="button twitter" href="#">Twitter</a>
<a class="button googleplus" href="#">Google+</a>
<a class="button pinterest" href="#">Pinterest</a>
<a class="button stumbleupon" href="#">Sumbleupon</a>
<a class="button linkedin" href="#">LinkedIn</a>
<a class="button pocket" href="#">Pocket</a>
<a class="button reddit" href="#">Reddit</a>
<a class="button tumblr" href="#">Tumblr</a>
<a class="button rss" href="#">RSS Feed</a>
<a class="button path" href="#">Path</a>
<a class="button hootsuite" href="#">HootSuite</a>
<a class="button github" href="#">GitHub</a>
<a class="button behance" href="#">Behance</a>

style.css

/*
* Styling the base of the buttons
*/
.button {
	width:120px;
	display:block;
	padding:10px;
	margin:15px;
	float:left;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	color:#FFF;
	}

/*
* Changing the background color for each button
*/
.facebook    { background:#3b5998; }
.twitter     { background:#00acee; }
.googleplus  { background:#dd4b39; }
.pinterest   { background:#c8232c; }
.stumbleupon { background:#f74425; }
.linkedin    { background:#0e76a8; }
.pocket      { background:#ee4056; }
.reddit      { background:#ff4500; }
.tumblr      { background:#34526f; }
.rss         { background:#ee802f; }	
.path        { background:#e41f11; }	
.hootsuite   { background:#003366; }	
.github      { background:#171515; }
.behance     { background:#005cff; }		
/*
* Changing the background color for each button on hover
*/
.facebook:hover    { background:#2f4679; }
.twitter:hover     { background:#0089bd; }
.googleplus:hover  { background:#b03b2d; }
.pinterest:hover   { background:#9f1b23; }
.stumbleupon:hover { background:#c4361d; }
.linkedin:hover    { background:#0b5e85; }
.pocket:hover      { background:#bd3344; }
.reddit:hover      { background:#cb3600; }
.tumblr:hover      { background:#294158; }
.rss:hover         { background:#bd6625; }	
.path:hover        { background:#b5180d; }	
.hootsuite:hover   { background:#002851; }
.github:hover      { background:#121010; }
.behance:hover     { background:#0049cb; }