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

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