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

Кнопки социальных сетей CSS для сайта

Кнопки социальных сетей CSS для сайта
Коллекция стильных и разнообразных по дизайну кнопок социальных сетей, где присутствует анимация с участием HTML и CSS, которые идут для сайта. Так как в современном мире социальные сети стали очень популярны, то веб разработчики создают группы для размещения материалов, а также для пользователей и гостей. Эффекты, что созданы для кнопок социальных сетей идут в разнообразной анимации, что происходит при наведении.

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

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

Социальные ссылки на чистом Css с анимации

Красивые кнопки соцсетей с различными эффектами

HTML

Код
<ul>
  <li>
  <a class="facebook" href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <i class="fa fa-facebook" aria-hidden="true"></i>
  </a>
  </li>
  <li>
  <a class="twitter" href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <i class="fa fa-twitter" aria-hidden="true"></i>
  </a>
  </li>
  <li>
  <a class="instagram" href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <i class="fa fa-instagram" aria-hidden="true"></i>
  </a>
  </li>
  <li>
  <a class="google" href="#">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <i class="fa fa-google-plus" aria-hidden="true"></i>
  </a>
  </li>
</ul>

CSS

Код
ul {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li {
  list-style:none;
}
ul li a {
  display:block;
  position:relative;
  width:85px;
  height:85px;
  line-height:85px;
  font-size:40px;
  text-align:center;
  text-decoration:none;
  color:#383434;
  margin: 0 25px;
  transition:.5s;
}
ul li a span {
  position:absolute;
  transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:3px;
  background:#383434;
}
ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}
ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}
ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:3px;
  height:100%;
  background:#383434;
}
ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}
ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}
ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

.facebook:hover {
  color: #2f4b86;
}
.facebook:hover span {  
  background: #2f4b86;
}
.twitter:hover {
  color: #188fd8;
}
.twitter:hover span {  
  background: #188fd8;
}
.instagram:hover {
  color: #bf1f9e;
}
.instagram:hover span {  
  background: #bf1f9e;
}
.google:hover {
  color: #c33827;
}
.google:hover span {  
  background: #c33827;
}
ul li a .twitter {
  color: #188cd4;
}
ul li a:hover:nth-child(3) {
  color: #b31c93;
}
ul li a:hover:nth-child(4) {
  color: #ca3c2b;
}

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

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

Плавающие иконки социальных медиа

Красивые эффекты для иконок при наведении

HTML

Код
<ul>
  <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
</ul>

CSS

Код
ul {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  margin:0;
  padding:0;
  display:flex;
}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  width: 55px;
  height: 55px;
  display: block;
  text-align: center;
  margin: 0 8px;
  border-radius: 100%;
  padding: 5px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 0 10px 15px rgba(25, 24, 24, 0.3);
  background: linear-gradient(0deg, #cecbcb, #f7f5f5);
  transition: .5s;
}

ul li a:hover {
  box-shadow: 0 2px 5px rgba(43, 41, 41, 0.3);
}

ul li a .fa {
  widht: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(0deg, #f7f0f0, #bdbcbc);
  border-radius: 50%;
  line-height: calc(60px - 12px);
  font-size: 25px;
  color: #545050;
  transition: .5s;
}

ul li:nth-child(1) a:hover .fa {
  color: #3b5998;
}

ul li:nth-child(2) a:hover .fa {
  color: #00aced;
}

ul li:nth-child(3) a:hover .fa {
  color: #dd4b39;
}

ul li:nth-child(4) a:hover .fa {
  color: #007bb6;
}

ul li:nth-child(5) a:hover .fa {
  color: #e4405f;
}

Как видим, что нужно подключить шрифтовые иконки Font Awesome, чтоб показались фигуры.

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

Кнопки с оригинальным свечения

Эффекты кнопок социальных сетей для сайта

HTML

Код
<div>
  <div class="knopki-sotsialnyk-setey">
  <ul>
  <li><a href="#"><i class="fa fa-arrows" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-btc" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-repeat" aria-hidden="true"></i></a></li>
  </ul>
  </div>
</div>

CSS

Код
ul {
  margin:0;
  padding:0;
  display:flex;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

ul li {
  list-style:none;
  margin: 0 15px;
}

ul li a {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  text-align: center;
  line-height: 58px;
  background: #131212;
  border-radius: 50%;
  font-size: 30px;
  color: #b1acac;
  transition: .5s;
}

ul li a:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  background: #d35400;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

ul li a:hover:before {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  filter: blur(3px);
}

ul li a:hover {
  color: #f5ba4e;
  box-shadow: 0 0 15px #ce841f;
  text-shadow: 0 0 15px #c55e19;
}

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

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

Иконки с эффектом при наведении

Иконки соц сетей html

HTML

Код
<div class="sanspecen-abakecton">
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-instagram"></i></a>
</div>

CSS

Код
.sanspecen-abakecton {
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
}

.sanspecen-abakecton a {
  display: inline-flex;
  height: 75px;
  width: 75px;
  background: #eae6e6;
  color: #eaeaea;
  margin: 0 0px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: 0.1s;
  font-size: 32px;
  -webkit-box-shadow: 3px 2px 4px 0px rgba(21, 20, 20, 0.75);
  -moz-box-shadow: 5px 3px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 3px 3px 3px 0px rgba(23, 22, 22, 0.75);
}

.sanspecen-abakecton a:nth-child(1) {
  color: #4971c3;
}

.sanspecen-abakecton a:nth-child(2) {
  color: #148fda;
}

.sanspecen-abakecton a:nth-child(3) {
  color: #d23a2d;
}

.sanspecen-abakecton a:nth-child(4) {
  color: #b52196;
}

.sanspecen-abakecton a:hover:nth-child(1) {
  color:#fff;
  background: #3b5998;
}

.sanspecen-abakecton a:hover:nth-child(2) {
  color:#fbfbfb;
  background: #1da1f2;
}

.sanspecen-abakecton a:hover:nth-child(3) {
  color:#fbfbfb;
  background: #db4437;
}

.sanspecen-abakecton a:hover:nth-child(4) {
  color:#fbfbfb;
  background: #c32aa3;
}

.sanspecen-abakecton a i {
  transition: 0.4s;
}

.sanspecen-abakecton a {
  transition: 0.4s;
}

.sanspecen-abakecton a:hover {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(31, 31, 31, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(31, 31, 31, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(31, 31, 31, 0.75);
}

.sanspecen-abakecton a:hover > i {
  transform:scale(1.4) rotate(360deg);
}

При наведение происходит полный круговорот кнопки с увеличением шрифтового знака.

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

Светлые кнопки с красивым эффектом

CSS3 анимация при наведении

HTML

Код
<div class="pokazatel-navedeniya">
  <a class="sotsialka" href="">
  <i class="fa fa-facebook-f"></i>
  </a>
  <a class="sotsialka" href="">
  <i class="fa fa-twitter"></i>
  </a>
  <a class="sotsialka" href="">
  <i class="fa fa-instagram"></i>
  </a>
  <a class="sotsialka" href="">
  <i class="fa fa-google-plus"></i>
  </a>
</div>

CSS

Код
.pokazatel-navedeniya {
  margin:0;
  padding:0;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.sotsialka {
  display:inline-block;
  width:60px;
  height: 60px;
  background: #f1f1f1;
  margin: 10px;
  border-radius: 30%;
  box-shadow:-5px 5px 15px -5px #f1f1f1;  
  overflow: hidden;
  position: relative;
  transition: 0.3s linear;
}

.sotsialka i {
  line-height: 60px;
  font-size: 26px;
  transition: 0.3s linear;
}

.sotsialka:nth-child(1) i {
  color:#3b5998;
}

.sotsialka:nth-child(2) i {
  color:#1da1f2;
}

.sotsialka:nth-child(3) i {
  color:#c32aa3;
}

.sotsialka:nth-child(4) i {
  color:#db4437;
}

.sotsialka:hover {
  transform: scale(1.1);
}

.sotsialka:hover i {
  transform: scale(1.2);
  color: #fff;
}

.sotsialka:before {
  content:"";
  position:absolute;
  width:120%;
  height:120%;
  transform: rotate(45deg);
  left: -110%;
  top:90%;
}

.sotsialka:nth-child(1)::before {
  background: #3b5998;
}

.sotsialka:nth-child(2)::before {
  background: #1da1f2;
}

.sotsialka:nth-child(3)::before {
  background: #c32aa3;
}

.sotsialka:nth-child(4)::before {
  background: #db4437;
}

.sotsialka:hover::before {
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}

@keyframes aaa {
  0% {
  left: -110%;
  top:90%;
  }
  50% {
  left:10%;
  top: -30%;
  }
  100% {
  left: -10%;
  top: -10%;
  }
}

Изначально под кнопками прописаны тени, что будут исчезать со сменой цвета.

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

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

Сам стиль безусловно отличается от стандартного, что при открытии страницы или вниз сайта установив, то они сразу будут заметны ля тех, кто решит поделиться информацией, то сделает это на раз, очень быстро, как было сказано в один, два клика.
16 Августа 2019 Загрузок: 2 Просмотров: 4694 Комментариев: (10)

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

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

Оставь свой отзыв

Комментарии: 10
Оно
Оно 07 Мая 2020 10:471
0
Было бы круто, если бы к Светлые кнопки с красивым эффектом добавили в css telegram канал. И еще хотела спросить, что за форма авторизации через соцсети у вас на сайте. Пожалуйста мне так надо 26a и код и авторизацию. Подписываюсь на ответ.
Kosten
Kosten 07 Мая 2020 11:294
0
Форма регистрация идет от хостинг, нет смысла ставить на другую площадку, так как не будет работать.

PS - напишите на какой ник вам поменять, цифры нельзя. И пожалуйста как можно быстрей, то поменяю сам, так как мне не известно, он или она, возьму что то среднее, а точнее оно, если вас устраивает, можете не писать.
Оно
Оно 07 Мая 2020 11:515
0
авторизацию не надо. я поняла
Оно
Оно 07 Мая 2020 10:582
0
просто смотрите: класс телеграмм подходит ко все представленным кнопкам, а к этим ни в какую не встает.не пойму что нужно изменить в css
Сопрано
Сопрано 07 Мая 2020 11:193
0
Здесь классы все разные, что каждый идет под свой вариант кнопки. Если вы говорите про демонстрацию, то там другие.
Оно
Оно 07 Мая 2020 11:546
0
в общем мне нужно добавить в этот html и css два телеграмм канала. когда добавляю в код html она не встает даже в "шрифтовом" варианте не обрамленная css. Пробовала другие из представленных,там все норм, а в этом ни в какую.
Kosten
Kosten 07 Мая 2020 12:268
0
Дайте ссылку на сайт, чтоб реально все посмотреть под установку.
noavatar
Юлия5080 07 Мая 2020 12:439
0
У меня тестовый сайт. Так что смысла давать ссылку нет. Я кое что придумала тут. Спасибо вам.
Kosten
Kosten 07 Мая 2020 12:257
0
Кнопки выполнены на чистом CSS, и подойдут на разные сайты, где есть доступ к панели управления, у Телеграмма явно у вас нет доступа, разве только поменять картинку или название, все что качается с персональными данными и не более.
noavatar
Юлия5080 15 Мая 2020 13:5510
-1
Ребят привет. Может вы знаете как этот сайт выводит записи на страницах таким образом? Это обычный конструктор? СПАМ
avatar