• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Стильные социальные кнопки с эффектом (Лучший дизайн социальных кнопок для сайта)
Стильные социальные кнопки с эффектом
Kosten
Дата: Понедельник, 2019-09-02, 22:48 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


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

Эффект довольно интересный. Изначально кнопки социальных значков-значков представлены в белом круге с оригинальными цветами. Тем не менее, цвет будет меняться, когда вы наводите курсор на них, то есть круг, в котором цвет социального символа будет сформирован с белым символом.



Подключаем кнопки:

Код
@import url(https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css);

HTML

Код
<a href="/" class="icon-button twitter"><i class="icon-twitter"></i><span></span></a>
<a href="/" class="icon-button facebook"><i class="icon-facebook"></i><span></span></a>
<a href="/" class="icon-button google-plus"><i class="icon-google-plus"></i><span></span></a>

CSS

Код
/* Wrapper */
.icon-button {
    background-color: white;
    border-radius: 3.6rem;
    cursor: pointer;
    display: inline-block;
    font-size: 2.0rem;
    height: 3.6rem;
    line-height: 3.6rem;
    margin: 0 5px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
    width: 3.6rem;
}

/* Circle */
.icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
         transition: all 0.3s;
    width: 0;
}
.icon-button:hover span {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 3.6rem;
    margin: -1.8rem;
}
.twitter span {
    background-color: #4099ff;
}
.facebook span {
    background-color: #3B5998;
}
.google-plus span {
    background-color: #db5a3c;
}

/* Icons */
.icon-button i {
    background: none;
    color: white;
    height: 3.6rem;
    left: 0;
    line-height: 3.6rem;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
         transition: all 0.3s;
    width: 3.6rem;
    z-index: 10;
}
.icon-button .icon-twitter {
    color: #4099ff;
}
.icon-button .icon-facebook {
    color: #3B5998;
}
.icon-button .icon-google-plus {
    color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
    color: white;
}

Демонстрация
Прикрепления: 4278988.png(7.3 Kb) · saxeda.zip(3.3 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-09-02, 23:03 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


Иконки начинают вращаться с помощью мыши, но самое интересное, что после наведения мыши на любую иконку, если вы переходите к следующей иконке, обе иконки начинают вращаться вместе. Это выглядит действительно привлекательно.



В head

Код
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

HTML

Код
<div class="social">
  <a href="/" class="link facebook" target="_parent"><span class="fa fa-facebook-square"></span></a>
  <a href="/" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
  <a href="/" class="link google-plus" target="_parent"><span class="fa fa-google-plus-square"></span></a>
</div>

CSS

Код
.social {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px dashed white;
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 70px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.google-plus {
  background-color: tomato;
  color: white;
}

.social .link.twitter {
  background-color: #00ACEE;
  color: white;
}

.social .link.facebook {
  background-color: #3B5998;
  color: white;
}


Демонстрация
Прикрепления: 0143419.png(28.9 Kb) · bsam.zip(3.1 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-09-02, 23:09 | Сообщение 3
Оффлайн
Администраторы
Сообщений:25098
Награды: 57


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

Фиксированные социальные сети



HTML

Код
<div class="social">
    <span class="line"></span>
    <ul>
  <li class="facebook">
   <a href="/" target="_blank">
    <i class="fab fa-facebook fa-2x"></i>
   </a>
  </li>
  <li class="twitter">
   <a href="/" target="_blank">
    <i class="fab fa-twitter fa-2x"></i>
   </a>
  </li>
  <li class="codepen">
   <a href="/" target="_blank"><i class="fab fa-codepen fa-2x"></i></a>
  </li>
  <li class="youtube">
   <a href="#" target="_blank">
    <i class="fab fa-youtube fa-2x"></i>
   </a>
  </li>
  <li class="instagram">
   <a href="#" target="_blank">
    <i class="fab fa-instagram fa-2x"></i>
   </a>
  </li>
  <li class="pinterest">
   <a href="#" target="_blank">
    <i class="fab fa-pinterest fa-2x"></i>
   </a>
  </li>
  <li class="github">
   <a href="#" target="_blank">
    <i class="fab fa-github fa-2x"></i>
   </a>
  </li>
  <li class="flickr">
   <a href="#" target="_blank">
    <i class="fab fa-flickr fa-2x"></i>
   </a>
  </li>
  <li class="linkedin">
   <a href="#" target="_blank">
    <i class="fab fa-linkedin fa-2x"></i>
   </a>
  </li>
    </ul>
</div>

CSS

Код
/* Import */
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
@import url(https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
}
body {
    background: #dddfde;
}

/* Social Presentation */
h2.title {
    font-family: "Quicksand", sans-serif;
    font-size: 24px;
    font-weight: 200;
    font-weight: 300;
    color: #000000;
    text-align: center;
    padding: 100px 0 0 0;
    text-transform: uppercase;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
.social .line {
    position: absolute;
    top: 0; left: 0px;
    width: 100%; height: 3px;
    background: #fced00;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 0;
}
.social ul {
    position: fixed;
    left: 50%; margin-left: -216px;
    list-style: none;
    color: #000;
}
.social ul li {
    float: left;
}
.social ul li a {
    position: relative;
    float: left;
    background: #fff000;
    width: 48px; height: 48px;
    text-align: center;
    color: #000;
    padding: 0 0 30px 0;
  align-items: center;
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.social ul li a:hover {
    color: #fff;
}
.fa-facebook, .fa-twitter, .fa-youtube, .fa-instagram, .fa-pinterest, .fa-github, .fa-flickr, .fa-linkedin {
    padding: 10px 0 0 0;
}

/* Pseudo Elements */
.social ul li a:after {
    content: "";
    position: absolute;
    bottom: 0px; left: 0;
    width: 1px; height: 1px;
    border: 24px solid transparent;
    border-bottom: 24px solid #dddfde;
    z-index: 0;
}

/* Hover */
.social ul li.facebook a:hover {
    background: #3b5998;
}
.social ul li.twitter a:hover {
    background: #44ccf6;
}
.social ul li.codepen a:hover {
    background: #cccccc;
}
.social ul li.youtube a:hover {
    background: #da2d2e;
}
.social ul li.instagram a:hover {
    background: #66269e;
}
.social ul li.pinterest a:hover {
    background: #c3042b;
}
.social ul li.github a:hover {
    background: #000000;
}
.social ul li.flickr a:hover {
    background: #72858c;
}
.social ul li.linkedin a:hover {
    background: #1c66c2;
}


Демонстрация
Прикрепления: 7978520.png(7.3 Kb) · 6757856.zip(4.3 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Стильные социальные кнопки с эффектом (Лучший дизайн социальных кнопок для сайта)
  • Страница 1 из 1
  • 1
Поиск: