В данной статье мы рассмотрим примеры кнопок соцсетей CSS на шрифтовых стилях. Прекрасный по дизайну набор социальных кнопок со встроенными шрифтами значков, которые отлично подойдут под многие тематические сайты. Стилистика дизайна у всех разная, которая заключается в том, чтобы предложить решение для социальных сетей, что будет соответствовать цветовой схеме. Чтобы все завершить, где все смотрелось органично дизайн на сайте, то добавляем нужный шрифт фирменного значка под заданный элемент.
От такой функций как социальные иконки, веб мастер получает функционал, что его материал разносят по социальным сетям, тем самым создается внешняя оптимизация сайта. Но кто-то в своем виденье больше считает дизайн на первом месте, если исключать плоской стиль. Каждый сайт использует уникальный стиль, где стилистика работает по-разному с различными вариантами, которые представлены в этом материале под выбор нужного стиля.
Плоская социальная анимация для кнопок с эффектом вращения на CSS
Шрифтовой стиль, который ставится по месту кнопок на странице в HEAD или можно разместить вверх сайта, так, чтоб на всем сайте они отображались.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">HTML
<section>
<ul id="dustlestugen">
<li>
<div class="facebook">
<a href="/">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</div>
<span>Facebook</span>
</li>
<li>
<div class="twitter">
<a href="/">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
<span>Twitter</span>
</li>
<li>
<div class="youtube">
<a href="/">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
</div>
<span>YouTube</span>
</li>
<li>
<div class="linkedin">
<a href="/">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
<span>LinkedIn</span>
</li>
<li>
<div class="instagram">
<a href="/">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</div>
<span>Instagram</span>
</li>
<li>
<div class="github">
<a href="/">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</div>
<span>Github</span>
</li>
</ul>
</section>CSS
section #dustlestugen {
text-align: center;
transform: translatez(0);
}
section #dustlestugen h2 {
margin: 80px 0px 40px;
color: #fff;
font-size: 2.4em;
text-transform: uppercase;
text-align: center;
}
section #dustlestugen li {
width: 120px;
height: 140px;
display: inline-block;
margin: 20px;
list-style: none;
}
section #dustlestugen li div {
width: 120px;
height: 120px;
color: #74d4b3;
font-size: 3.4em;
text-align: center;
line-height: 120px;
background-color: #fff;
transition: all 0.5s ease;
}
section #dustlestugen li a {
color: #77cc6d;
}
section #dustlestugen li div:hover {
transform: rotate(360deg);
border-radius: 100px;
}
section #dustlestugen li span {
width: 120px;
height: 20px;
display: block;
padding: 15px 0px;
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
text-align: center;
}
.obsluzhivan a {
display: block;
text-align: center;
color: #74d4b3;
text-decoration: none;
font-size: 24px;
margin-top: 50px;
background: white;
padding: 20px;
max-width: 300px
}Здесь представлены такие социальные площадки, как LinkedIn, Twitter, Instagram, Youtube, Github и Facebook, что выстроены на простом стиле, виде квадратного формата. Многие другие значки также доступны благодаря библиотеке Font Awesome, которая доступна в вашем распоряжении.
Всплывающие кнопки социальных сетей на чистом CSS
Этот вариант отличается от других представленных в этом материале, так, что его можно скрыть. Где для этого ниже установлена кнопка виде стрелки, что при клике скрываем, при аналогичном клике они появляются.
Также шрифт под фигур кнопок:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">HTML
<div id="wrapper">
<input type="checkbox" class="checkbox" id="share" checked />
<label for="share" class="label entypo-export"><i class="fa fa-share" aria-hidden="true"></i></label>
<div class="social">
<ul>
<li class="entypo-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li class="entypo-youtube"><i class="fa fa-youtube" aria-hidden="true"></i></li>
<li class="entypo-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li class="entypo-gplus"><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li class="entypo-instagram"><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li class="entypo-dropbox"><i class="fa fa-dropbox" aria-hidden="true"></i></li>
<li class="entypo-github"><i class="fa fa-github" aria-hidden="true"></i></li>
</ul>
</div>
</div>
CSS
html {
margin:0;
padding:50px 0;
background: #161616;
}
#wrapper {
text-align:center;
position:absolute;
left:0;
right:0;
margin: 100px auto;
width:420px;
}
input[type="checkbox"]{display:none;}
.checkbox:checked + .label{
background:#7B7484;
color:#231733;
}
.checkbox:checked ~ .social {
opacity:1;
transform:scale(1) translateY(-90px);
}
.label {
background:#231733;
font-size:16px;
cursor:pointer;
margin:0;
padding:5px 10px;
border-radius:10%;
color:#7B7484;
}
.social {
transform-origin:50% 0%;
transform:scale(0) translateY(-190px);
opacity:0;
transition:.5s;
}
ul {
position:relative;
left:0;
right:0;
margin:-5px auto 0;
color:#fff;
height:46px;
width:420px;
background:#3B5998;
padding:0;
list-style:none;
}
ul li {
font-size:20px;
cursor:pointer;
width:60px;
margin:0;
padding:12px 0;
text-align:center;
float:left;
display:block;
height:22px;}
ul li:hover {color:rgba(0,0,0,.5);}
ul:after {
content:'';
display:block;
position:absolute;
left:0;
right:0;
margin:46px auto;
height:0;
width:0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #E34429;
}
li[class*="twitter"] {background:#6CDFEA;padding:12px 0;}
li[class*="gplus"] {background:#E34429;padding:12px 0;}
li[class*="dropbox"] {background:#8DC5F2;padding:12px 0;}
li[class*="github"] {background:#9C7A5B;padding:12px 0;}
li[class*="instagram"] {background:#0E68CE;padding:12px 0;}
li[class*="youtube"] {background:#CC181E;padding:12px 0;}
.credits a {
color: #fff;
text-decoration: none;
}
