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

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

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

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

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

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

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

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

HTML

Код

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

Код

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

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

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

06 Декабря 2018 Загрузок: 1 Просмотров: 1654 Комментариев: (2)

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

СКАЧАТЬ

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

Kosten

Комментарии: 2
Порядок вывода комментариев: First 06 Декабря 2018 23:44¹ 0 Красивые, но это больше заготовка под кнопки шаринга, так как при клике на кнопку шаринга не будет. Kosten 07 Декабря 2018 00:39² 0 Для начало начал искать значение шаринга, и вот что нашел. CS (Card Sharing - кард-шаринг) - это совместное использование карты условного доступа в другом ресивере через сеть ethernet. First, здесь можно поставить под другие функций, как пример подключить под навигацию, где кнопки станут как ключевые слова, что по знакам можно понять на кукую тему перейти.