コピペで簡単!CSSだけで作るSNSボタンデザイン[サンプルコード付]

今やWEBで集客するなら必要不可欠なツールの1つであるSNS（facebook、Twitter、LINEなど）。
今回はそんな各種SNSのボタンデザインをサンプルコード付きでご紹介します。

Twitter
Facebook
Instagram
LINE
Google+
はてなブックマーク
Pocket
RSS

の8つになります。
CSSをコピペで使えるのでぜひ試してみて下さい。

1. CSSサンプルコード
2. 完成イメージ

CSSサンプルコード

.sns {
	margin: 0 auto;
	text-align: center;
}

.sns ul {
	margin: 0 auto;
	list-style: none;
}

.sns li {
	float: left;
	width: 23%;
	margin: 10px 5px 5px 5px;
}

.sns li a {
	display: block;
	font-size: 90%;
	padding: 8px 0px 8px 0px;
	color: #fff;
	border-radius: 3px;
	text-align: center;
	text-decoration: none;
}

.sns li a:hover {
	-webkit-transform:translate3d(0px,5px,1px);
	-moz-transform:translate3d(0px,5px,1px);
	transform:translate3d(0px,5px,1px);
	box-shadow:none;
}


.sns .twitter a {
	background: #00acee;
	box-shadow: 0 5px 0 #0092ca;
}


.sns .facebook a {
	background: #3b5998;
	box-shadow: 0 5px 0 #2c4373;
}

.sns .googleplus a {
	background: #db4a39;
	box-shadow: 0 5px 0 #ad3a2d;
}

.sns .hatebu a {
	background: #5d8ac1;
	box-shadow: 0 5px 0 #43638b;
}

.sns .line a {
	background: #25af00;
	box-shadow: 0 5px 0 #219900;
}

.sns .pocket a {
	background: #f03e51;
	box-shadow: 0 5px 0 #c0392b;
}

.sns .rss a {
	background: #ffb53c;
	box-shadow: 0 5px 0 #e09900;
}

.sns .insta a {
	background: #e02c75;
	background-image: -webkit-linear-gradient(top, #e02c75, #fabd53);
	background-image: -moz-linear-gradient(top, #e02c75, #fabd53);
	background-image: -ms-linear-gradient(top, #e02c75, #fabd53);
	background-image: -o-linear-gradient(top, #e02c75, #fabd53);
	background-image: linear-gradient(to bottom, #e02c75, #fabd53);
	box-shadow: 0 5px 0 #e09900;
}

.clearfix:after {
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
}

@media screen and (max-width: 480px){
.sns li {
    width: 45%;
    margin: 10px 5px 5px 5px;
}
}