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

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

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

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

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

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

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

HTML

Код

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

Код

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

Код

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

Код

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

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

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

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

HTML

Код

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 Просмотров: 4574 Комментариев: (10)

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

СКАЧАТЬ

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

Kosten

Комментарии: 10
Порядок вывода комментариев: Оно 07 Мая 2020 10:47¹ 0 Было бы круто, если бы к Светлые кнопки с красивым эффектом добавили в css telegram канал. И еще хотела спросить, что за форма авторизации через соцсети у вас на сайте. Пожалуйста мне так надо и код и авторизацию. Подписываюсь на ответ. Kosten 07 Мая 2020 11:29⁴ 0 Форма регистрация идет от хостинг, нет смысла ставить на другую площадку, так как не будет работать. PS - напишите на какой ник вам поменять, цифры нельзя. И пожалуйста как можно быстрей, то поменяю сам, так как мне не известно, он или она, возьму что то среднее, а точнее оно, если вас устраивает, можете не писать. Оно 07 Мая 2020 11:51⁵ 0 авторизацию не надо. я поняла Оно 07 Мая 2020 10:58² 0 просто смотрите: класс телеграмм подходит ко все представленным кнопкам, а к этим ни в какую не встает.не пойму что нужно изменить в css Сопрано 07 Мая 2020 11:19³ 0 Здесь классы все разные, что каждый идет под свой вариант кнопки. Если вы говорите про демонстрацию, то там другие. Оно 07 Мая 2020 11:54⁶ 0 в общем мне нужно добавить в этот html и css два телеграмм канала. когда добавляю в код html она не встает даже в "шрифтовом" варианте не обрамленная css. Пробовала другие из представленных,там все норм, а в этом ни в какую. Kosten 07 Мая 2020 12:26⁸ 0 Дайте ссылку на сайт, чтоб реально все посмотреть под установку. Юлия5080 07 Мая 2020 12:43⁹ 0 У меня тестовый сайт. Так что смысла давать ссылку нет. Я кое что придумала тут. Спасибо вам. Kosten 07 Мая 2020 12:25⁷ 0 Кнопки выполнены на чистом CSS, и подойдут на разные сайты, где есть доступ к панели управления, у Телеграмма явно у вас нет доступа, разве только поменять картинку или название, все что качается с персональными данными и не более. Юлия5080 15 Мая 2020 13:55¹⁰ -1 Ребят привет. Может вы знаете как этот сайт выводит записи на страницах таким образом? Это обычный конструктор? СПАМ