Социальные кнопки CSS

Социальные кнопки CSS - это элементы веб-дизайна, которые позволяют пользователям легко и быстро поделиться контентом в социальных сетях. Они являются важным инструментом для повышения удобства использования сайта и распространения информации в сети. Социальные кнопки CSS обладают не только функциональностью, но и стильным дизайном. Они могут быть различных форм и размеров, а также адаптироваться под разные цветовые схемы сайта. Благодаря CSS, разработчики могут легко настраивать внешний вид кнопок, чтобы они органично вписывались в дизайн страницы.

HTML

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<ul class='social'>
	<li>
		<a class="fa fa-facebook" href="#">
			<span>Facebook</span>
		</a>
	</li>

	<li>
		<a class="fa fa-twitter" href="#">
			<span>Twitter</span>
		</a>
	</li>

	<li>
		<a class="fa fa-dribbble" href="#">
			<span>Dribbble</span>
		</a>
	</li>

	<li>
		<a class="fa fa-google-plus" href="#">
			<span>Google Plus</span>
		</a>
	</li>

</ul><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<ul class='social'>
	<li>
		<a class="fa fa-facebook" href="#">
			<span>Facebook</span>
		</a>
	</li>

	<li>
		<a class="fa fa-twitter" href="#">
			<span>Twitter</span>
		</a>
	</li>

	<li>
		<a class="fa fa-dribbble" href="#">
			<span>Dribbble</span>
		</a>
	</li>

	<li>
		<a class="fa fa-google-plus" href="#">
			<span>Google Plus</span>
		</a>
	</li>

</ul>

CSS
 

body {
	background: #333;
}
ul {
	list-style: none;
}
.social {
	width: 200px;
	height: 220px;
	position: fixed;
	margin-top: 30px;
	perspective: 1000px;
}

.social li a {
	display: block;
	height: 20px;
	width: 40px;
	background: #222;
	border-bottom: 1px solid #333;
	font: normal normal normal 16px/20px "FontAwesome", "Source Sans Pro",
		Helvetica, Arial, sans-serif;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	padding: 10px;
	text-decoration: none;
	text-align: center;
	transition: background 0.5s ease 0.3ms;
}

.social li:first-child a:hover {
	background: #3b5998;
}

.social li:nth-child(2) a:hover {
	background: #00acee;
}

.social li:nth-child(3) a:hover {
	background: #ea4c89;
}

.social li:nth-child(4) a:hover {
	background: #dd4b39;
}

.social li:first-child a {
	border-radius: 0 5px 0 0;
}

.social li:last-child a {
	border-radius: 0 0 5px 0;
}

.social li a span {
	width: 100px;
	float: left;
	text-align: center;
	background: #222;
	color: #fff;
	margin: -25px 74px;
	padding: 8px;
	transform-origin: 0;
	visibility: hidden;
	opacity: 0;
	transform: rotateY(45deg);
	border-radius: 5px;
	transition: all 0.5s ease 0.3ms;
}

.social li span:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: -20px;
	top: 7px;
	border: 10px solid transparent;
	border-right: 10px solid #222;
}

.social li a:hover span {
	visibility: visible;
	opacity: 1;
	transform: rotateY(0);
}
.box {
	width: 300px;
	margin: 0 auto;
	color: #fff;
	font-size: 18px;
	font-family: "Arial" sans-serif;
}

Получаем результат