Кнопки популярных соц.сервисов

by Andrey Dobrovoi

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>

CSS

/*
* Вазовые стили кнопок
*/
.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;
	}
 
/*
* Изменение фонового цвета для каждой кнопки
*/
.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;
	}		
/*
* Изменение фонового цвета для каждой кнопки при наведении указателя мыши
*/
.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;
	}