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

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

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

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

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

Так изначально идет материал, который можно скачать:

Это немного доработан по оформлению, где уже появились изменение в стилистике:

Красивые анимированные кнопки при наведение

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

HTML

Код

<nav class="kadnugdeb_kolpewaxin">
 <ul>
 <li><a href="#">Название </a></li>
 <li><a href="#">Клик наведение </a></li>
 <li><a href="#">Кнопки </a></li>
 </ul>

CSS

Код

.kadnugdeb_kolpewaxin {
  position: fixed;
  top: 20px;
}
.kadnugdeb_kolpewaxin ul {
  padding: 0px;
  -webkit-transform: translate(-270px, 0);
  -moz-transform: translate(-270px, 0);
  -ms-transform: translate(-270px, 0);
  -o-transform: translate(-270px, 0);
  transform: translate(-270px, 0);
}
.kadnugdeb_kolpewaxin ul li {
  display: block;
  margin: 4px;
  background: rgba(24, 56, 80, 0.87);
  width: 297px;
  text-align: right;
  padding: 8px;
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  border: 2px solid #9ca3b1;
}
.kadnugdeb_kolpewaxin ul li:hover {
  -webkit-transform: translate(110px, 0);
  -moz-transform: translate(110px, 0);
  -ms-transform: translate(110px, 0);
  -o-transform: translate(110px, 0);
  transform: translate(110px, 0);
  background: rgba(57, 4, 58, 0.96);
}
.kadnugdeb_kolpewaxin ul li:hover a {
  color: #e2e2e2;
}
.kadnugdeb_kolpewaxin ul li:hover i {
  color: #f3f3f3;

  background: rgba(17, 28, 49, 0.96);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  border: 1px solid #e0e3e8
}
.kadnugdeb_kolpewaxin ul li i {
  margin-left: 10px;
  color: #191818;
  background: #eaeaea;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
  background: #fdfdfd;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

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

PS - вам остается поставить стиль для того, чтоб при открытие сразу показывались кнопки font-awesome, что для этого нужно их подключить. Вероятно у многих они уже выставлены, ведь современный портал невозможно без них представить.

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

14 Марта 2019 Просмотров: 985 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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