» »

Кнопки социальных сетей с эффектом на CSS3

Кнопки социальных сетей с эффектом на CSS3

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

Здесь идет 4 эффекта, где безусловно подберете тот эффект, который больше нравится, так как они все разные. Есть такой, что при наведении кнопка полностью прокручивается, также есть, что поднимается и другие анимации, что выставлены при помощи CSS. Если подробнее говорить, то в этой статье мы создадим несколько наборов анимированных кнопок с CSS3, которые относятся к популярным социальным интернет ресурсам. Также будет использоваться пограничный радиус, что означает на переход и преобразование CSS3.

Безусловно не обойтись без шрифта, который выводит заданные знаки. А это нам позволяет создавать и выставлять социальные кнопки CSS3 без использования каких-либо изображений, которые основном закрепляются на знаки. Здесь задействован шрифт, под названием Brandico, что можете скачать или сразу поставить. Но рекомендую перейти на Font Awesome, на которых более разнообразия, хотя работа у них у всех аналогична.

Страницу Demo на кнопки CSS3 можно увидеть ниже. Здесь снимок, что снят с тестового ресурса, где материал проверялся на работоспособность.

Социальные знаки на сайт

Первым делом пропишем стиль Brandico на кнопки в CSS.

Код
@import url(http://weloveiconfonts.com/api/?family=brandico);

HTML-код

HTML - это простой неупорядоченный подбор со списками. Мы добавляем классы значков Brandico к ссылкам внутри списка.

Код
<ul class="klasimeckue_lodzamig" id="sogialka_tevtgun1">
  <li>
  <a href="#" class="brandico-twitter-bird"></a>
  </li>
  <li>
  <a href="#" class="brandico-facebook"></a>
  </li>
  <li>
  <a href="#" class="brandico-instagram"></a>
  <li>
  <a href="#" class="brandico-vimeo"></a>
  </li>
  <li>
  <a href="#" class="brandico-linkedin"></a>
  </li>
</ul>

<ul class="klasimeckue_lodzamig" id="sogialka_tevtgun2">
  <li>
  <a href="#" class="brandico-twitter-bird"></a>
  </li>
  <li>
  <a href="#" class="brandico-facebook"></a>
  </li>
  <li>
  <a href="#" class="brandico-instagram"></a>
  <li>
  <a href="#" class="brandico-vimeo"></a>
  </li>
  <li>
  <a href="#" class="brandico-linkedin"></a>
  </li>
</ul>

<ul class="klasimeckue_lodzamig" id="sogialka_tevtgun3">
  <li>
  <a href="#" class="brandico-twitter-bird"></a>
  </li>
  <li>
  <a href="#" class="brandico-facebook"></a>
  </li>
  <li>
  <a href="#" class="brandico-instagram"></a>
  <li>
  <a href="#" class="brandico-vimeo"></a>
  </li>
  <li>
  <a href="#" class="brandico-linkedin"></a>
  </li>
</ul>

Общий стиль CSS

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

Код
/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}

ul.klasimeckue_lodzamig {
  text-align: center;
  margin-top: 35px;
}

ul.klasimeckue_lodzamig li {
  display: inline-block;
  margin: 0 7px;
}

ul.klasimeckue_lodzamig li a {
  width: 57px;
  height: 57px;
  display: block;
  border-radius: 85px;
  text-decoration: none;
  font-size: 29px;
  line-height: 59.7px;
  color: #fdf7f7;
}

ul.klasimeckue_lodzamig li a.brandico-twitter-bird {
  background-color: #2882e8;
}

ul.klasimeckue_lodzamig li a.brandico-facebook {
  background-color: #2e2b54;
}

ul.klasimeckue_lodzamig li a.brandico-instagram {
  background-color: #1e6977;
}

ul.klasimeckue_lodzamig li a.brandico-vimeo {
  background-color: #1c96b5;
}

ul.klasimeckue_lodzamig li a.brandico-linkedin {
  background-color: #0a72a5;
}

/*sogialka_tevtgun 1*/
ul#sogialka_tevtgun1 li a {
  transition: transform 0.2s linear;
}

ul#sogialka_tevtgun1 li:hover a {
  transform: translateY(-10px);
}

/*sogialka_tevtgun 2*/
ul#sogialka_tevtgun2 li a {
  transition: transform 0.5s ease-in-out;
}

ul#sogialka_tevtgun2 li:hover a {
  transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}

/*sogialka_tevtgun 3*/
ul#sogialka_tevtgun3 li a {
  transition: transform 0.2s ease-in-out 0;
}

ul#sogialka_tevtgun3 li:hover a {
  transform: rotateZ(27deg) scale(1.1);
}

Теперь вы можете сделать любые кнопки под основную стилистику.

Демонстрация
2018-05-16 Загрузок: 3 Просмотров: 484 Комментарий: (5)

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

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

Комментарий: 5
Kosten
Kosten 2018-05-16 14:371
0
Кто знает, как можно шрифты подключить на демонстраций, на сайте jsfiddle.net, то почему то не показывает. На тестовом ресурсе все отлично выводит, просто чтоб можно было эффекты посмотреть.

Вот как получилось: jsfiddle.net/Kocsten/qga1p4oL/
-SAM-
-SAM- 2018-05-16 15:442
+1
У меня лично в демке работает (если бы не работало, то вообще не видно было бы иконок) - как на скрине выводится, но в демке там 3 строки (и соответственно 3 эффекта, 4-ого нет и не ясно какой он быть должен... разве что без эффекта при наводке - это считать четвертым).

Kosten
Kosten 2018-05-16 16:243
0
Как вы интересно вывели знаки, не могу понять, стиль на месте, все на месте, а на этом сайте, где демонстрация не как не хочет показывать, или там нужно функцию к шрифтам подключать.
-SAM-
-SAM- 2018-05-16 16:364
0
Kosten
Kosten 2018-05-16 16:575
0
Но с вашей демки перекинул на свое, что все нормально, все знаки выводит. А если брать и самому делать, то не будет. Здесь этот материал в сети нашел, на буржуйском ресурсе, так там не было шрифтовых иконок, но решил все таки пролверить на тестовом сайте, и там нормально вывело, что на скрине можно видеть.

Буду разбираться, просто мне jsfiddle.net больше нравится, чем codepen.io.
avatar