» »

Красивые кнопки соц.сетей с анимацией CSS

Красивые кнопки соц.сетей с анимацией CSS

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

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

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

1. При открытии страницы или интернет ресурса.

Кнопка с эффектом на CSS3

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

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

Приступаем к установке:

HTML

Код
<div id="mobustiqa-senectus">
  <div class="placeratundes pointer">
  <span class="fa fa-share-alt"></span>
  <div id="nukeciesm-kivatabes">
  <div class="giavutaebcies">
  <a class="facebook" href=""><i class="fa fa-facebook"></i></a>
  <a class="google" href=""><i class="fa fa-google-plus"></i></a>
  <a class="instagram" href=""><i class="fa fa-instagram"></i></a>
  <a class="tumblr" href=""><i class="fa fa-tumblr"></i></a>
  <a class="twitter" href=""><i class="fa fa-twitter"></i></a>
  <a class="youtube" href=""><i class="fa fa-youtube"></i></a>
  </div>
  </div>
  </div>
</div>

CSS

Код
#mobustiqa-senectus {
  width: 100%;
  margin-top: 15px;
  text-align: center;
}

#mobustiqa-senectus a, #mobustiqa-senectus > .placeratundes {
  position: relative;
  float: none;
  display: inline-block;
  color: #f9f9f9;
  font-size: 23px;
  padding: 0px;
  background-color: transparent;
  width: 50px;
  height: 50px;
  line-height: 49px;
  text-align: center;
  border-radius: 100%;
  border: 2px solid #f9f9f9;
}

#mobustiqa-senectus a {
  background-color: rgba(35, 34, 34, 0.26);
}

#mobustiqa-senectus > * > span {
  background-color: rgba(18, 67, 125, 0.87);
  margin: -3px;
  padding: 0!important;
  border: 5px solid rgba(142, 142, 142, 0.82);
  display: block;
  color: #e8e2e2;
  font-size: 20px;
  padding: 0px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 100%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .40s ease-in-out;
  -moz-transition: all .40s ease-in-out;
  transition: all .40s ease-in-out;
}

#mobustiqa-senectus > * > span:hover {
background: #117330;
}
   
#mobustiqa-senectus > * > span:hover,
#mobustiqa-senectus > .open > span {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

#nukeciesm-kivatabes {
  left: 50%;
  margin: 0 auto 0;
  position: absolute;
  top: 57px;
  transform: translate(-50%, 0);
  visibility: hidden;
  width: 415px;
}

#nukeciesm-kivatabes a {
  visibility: hidden;
  opacity: 0;
  margin: 5px 2px;
  background-color: rgba(0, 0, 0, 0.6);
  position: relative;
  top: 10px;
}

#nukeciesm-kivatabes a > span {
  position: relative;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.giavutaebcies {
  cursor: default;
}

.pointer {
  cursor: pointer
}

.facebook:hover {
  background: #27437b !important
}

.google:hover {
  background: #b3392a !important
}

.instagram:hover {
  background: #3c6688 !important
}

.tumblr:hover {
  background: #1f364c !important
}

.twitter:hover {
  background: #0d88b7 !important
}

.youtube:hover {
  background: #980f0f !important
}

@media only screen and (max-width: 480px) {
  #nukeciesm-kivatabes {
  width: 120px;
  }
}

JS

Код
$(document).on('click', '#mobustiqa-senectus > .placeratundes', function() {

  var self = $(this);
  var element = $('#nukeciesm-kivatabes a');
  var c = 0;

  if (self.hasClass('animate')) {
  return;
  }

  if (!self.hasClass('open')) {

  self.addClass('open');

  TweenMax.staggerTo(element, 0.3, {
  opacity: 1,
  visibility: 'visible'
  },
  0.075);
  TweenMax.staggerTo(element, 0.3, {
  top: -12,
  ease: Cubic.easeOut
  },
  0.075);

  TweenMax.staggerTo(element, 0.2, {
  top: 0,
  delay: 0.1,
  ease: Cubic.easeOut,
  onComplete: function() {
  c++;
  if (c >= element.length) {
  self.removeClass('animate');
  }
  }
  },
  0.075);

  self.addClass('animate');

  } else {

  TweenMax.staggerTo(element, 0.3, {
  opacity: 0,
  onComplete: function() {
  c++;
  if (c >= element.length) {
  self.removeClass('open animate');
  element.css('visibility', 'hidden');
  };
  }
  },
  0.075);
  }
});

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

Демонстрация
2018-12-06 Загрузок: 1 Просмотров: 191 Комментарий: (2)

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

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

Комментарий: 2
First
First 2018-12-06 23:441
0
Красивые, но это больше заготовка под кнопки шаринга, так как при клике на кнопку шаринга не будет.
Kosten
Kosten 2018-12-07 00:392
0
Для начало начал искать значение шаринга, и вот что нашел. CS (Card Sharing - кард-шаринг) - это совместное использование карты условного доступа в другом ресивере через сеть ethernet.

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