Социальные кнопки 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; } 

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