ZorNet.Ru — сайт для вебмастера » HTML и CSS » Социальные кнопки на шрифтовых стилях

Социальные кнопки на шрифтовых стилях

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

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

Первая часть подборки Соц.Кнопок на HTML + CSS

Плоская социальная анимация для кнопок

Плоская социальная анимация для кнопок на CSS

Шрифтовой стиль, который ставится по месту кнопок на странице в HEAD или можно разместить вверх сайта, так, чтоб на всем сайте они отображались.

Код

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, которая доступна в вашем распоряжении.

Демонстрация

Всплывающие кнопки социальных сетей

Всплывающие кнопки социальных сетей на HTML и CSS

Этот вариант отличается от других представленных в этом материале, так, что его можно скрыть. Где для этого ниже установлена кнопка виде стрелки, что при клике скрываем, при аналогичном клике они появляются.

Также шрифт под фигур кнопок:

Код

HTML

Код

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;
}

Легким набором кнопок для социальных сетей, который использует HTML5 для обеспечения очень удобной функции, где основном вы получаете простой виджет для добавления на ваш сайт.

Где после нажатия на виджет, то количество сайтов социальных сетей расширяется это может быть использовано для обмена контентом или для продвижения ваших собственных профилей в социальных сетях.

Демонстрация

Социальные кнопки с применением шрифтовых кнопок

Социальные кнопки с применением шрифтовых кнопок

Набор социальных кнопок со встроенными шрифтами значков является одним из самых плавных воплощений такой концепции набора значков. Решения для социальных сетей с соответствующими цветовыми схемами Чтобы завершить все это, он добавляет шрифт фирменного значка рядом с каждым из элементов.

HTML

Код

<div id="social-platforms">
<a class="kaved kaved-icon kaved-facebook" href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a>
<a class="kaved kaved-icon kaved-twitter" href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a>
<a class="kaved kaved-icon kaved-googleplus" href="#"><i class="fa fa-google-plus"></i><span>Google+</span></a>
<a class="kaved kaved-icon kaved-pinterest" href="#"><i class="fa fa-pinterest"></i><span>Pinterest</span></a>
<a class="kaved kaved-icon kaved-linkedin" href="#"><i class="fa fa-linkedin"></i><span>LinkedIn</span></a>
</div>

CSS

Код

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

/*Ignore me, I'm just page styling*/
html {font-family: 'Roboto', sans-serif;font-size:16px;line-height:1em;height:100%;}
body {
  background: #f2f3f5;
  background: -moz-linear-gradient(-45deg, #f2f3f5 0%, #f2f3f5 50%, #F2F2F2 50%, #F2F2F2 50%, #F2F2F2 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2f3f5), color-stop(50%,#f2f3f5), color-stop(50%,#F2F2F2), color-stop(50%,#F2F2F2), color-stop(100%,#F2F2F2));
  background: -webkit-linear-gradient(-45deg, #f2f3f5 0%,#f2f3f5 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%);
  background: -o-linear-gradient(-45deg, #f2f3f5 0%,#f2f3f5 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%);
  background: -ms-linear-gradient(-45deg, #f2f3f5 0%,#f2f3f5 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%);
  background: linear-gradient(135deg, #f2f3f5 0%,#f2f3f5 50%,#F2F2F2 50%,#F2F2F2 50%,#F2F2F2 100%);
}

h1 {font-size:1.5em;margin-bottom:55px;}

#social-platforms {
  position:relative;
  top:100px;
  top:25vh;
  font-size:1rem;
  text-align:center;
  height:250px;
  overflow:hidden;
}

/*Pen code from this point on*/
.kaved {
  clear:both;
  white-space:nowrap;
  font-size:.8em;
  display:inline-block;
  border-radius:5px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
  margin:2px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  overflow:hidden
}

.kaved:hover {
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45);
}

.kaved:focus {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);
}

.kaved > span,.kaved-icon > i {
  float:left;
  padding:13px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  line-height:1em
}

.kaved > span {
  padding:14px 18px 16px;
  white-space:nowrap;
  color:#FFF;
  background:#b8b8b8
}

.kaved:focus > span {
  background:#9a9a9a
}

.kaved-icon > i {
  border-radius:5px 0 0 5px;
  position:relative;
  width:13px;
  text-align:center;
  font-size:1.25em;
  color:#fff;
  background:#212121
}

.kaved-icon > i:after {
  content:"";
  border:8px solid;
  border-color:transparent transparent transparent #222;
  position:absolute;
  top:13px;
  right:-15px
}

.kaved-icon:hover > i,.kaved-icon:focus > i {
  color:#FFF
}

.kaved-icon > span {
  border-radius:0 5px 5px 0
}

/*Facebook*/
.kaved-facebook:hover > i,.kaved-facebook:focus > i {
  color:#3b5998
}

.kaved-facebook > span {
  background:#3b5998
}

/*Twitter*/
.kaved-twitter:hover > i,.kaved-twitter:focus > i {
  color:#55acee
}

.kaved-twitter > span {
  background:#55acee
}

/*Google*/
.kaved-googleplus:hover > i,.kaved-googleplus:focus > i {
  color:#dd4b39
}

.kaved-googleplus > span {
  background:#dd4b39
}

/*Pinterest*/
.kaved-pinterest:hover > i,.kaved-pinterest:focus > i {
  color:#cb2028
}

.kaved-pinterest > span {
  background:#cb2028
}

/*LinkedIn*/
.kaved-linkedin:hover > i,.kaved-linkedin:focus > i {
  color:#007bb6
}

.kaved-linkedin > span {
  background:#007bb6
}

Это будет особенно хорошо работать в ситуациях, когда мы хотим продвигать наши профили. Вы можете использовать их вместо прямых кнопок обмена в социальных сетях на наших страницах контента.

Демонстрация

Здесь нужно брать за внимание, это создавая потрясающие кнопки, что на прямую предназначены для обмена в социальных сетях, что при открытии страницы или сайта они привлекут внимание даже самых невнимательных посетителей.

16 Октября 2019 Просмотров: 859 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0