» »

Кнопки социальных сетей 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%;
  }
}

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

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

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

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

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

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

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