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

Кнопки анимации на CSS и Font Awesome

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

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

Так выглядит действие с наведением курсора:

Анимированные кнопки на CSS с Font Awesome

Установочный процесс:

Если еще не установили стили под шрифтовые знаки в HEAD

Код

HTML

Код

CSS

Код

.sotsialnaya_sukaknopes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 70%;
  margin:0 auto;

}
.krasivaya_snova{
  display: flex;
  background:#fff;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  margin: 15px 15px;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
  -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.09);
  transition: transform 0.5s;
}
.anacok_dolsenua{
  color: #777;
  font-size: 25px;
  transition: transform 0.5s;
}
.krasivaya_snova:hover{
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0,0, 0.2),
  inset 4px 4px 6px -1px rgba(255,255,255,0.7),
  -0.5px -0.5px 0px rgba(255, 255, 255, 1),
  0.5px 0.5px 0px rgba(0,0,0,0.15),
  0px 12px 10px -10px rgba(0,0,0,0.05);
  transform: translateY(2px);
}
.krasivaya_snova:hover .anacok_dolsenua{
  transform: scale(0.95);
}
@media only screen and (max-width: 800px){
  .sotsialnaya_sukaknopes{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  margin:0 auto;
  }
}
figure{

  overflow-x: auto;
  background:#f8f8f8;
  margin: 0;
  padding:0 5px;

}
code{
  color:#008080;
  padding:0 10px;
  outline: none;
}
.code01{
  color: #00009e;
}
.code02{
  color:#008080;
}
.code03{
  color:#dd1144
}
figure::-webkit-scrollbar {
  height: 7px !important;
}

/* Track */
figure::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 0px;
}
/* Handle */
figure::-webkit-scrollbar-thumb {
  background: #d5d7de;
  border-radius: 0px;
}
.code-box{
  display: flex;
  margin: 0 auto;
  justify-content: center;
  padding:0 10px 100px 10px;
}
.kogsanuda{
  background:#f8f8f8;
  border-left:1px solid #d5d7de;
  border-top:0;
  border-right:1px solid #d5d7de;
  border-bottom:0;
  outline: none;
  border-radius: 0;
  color:#333;
  cursor: pointer;
  position: relative;
  z-index: 2
}
.kogsanuda:after{
  content: "Copied";
  position: absolute;
  top: 100%;
  left: -4px;
  padding:10px 5px 5px 5px;
  background: #333;
  color:#d5d7de;
  border-radius: 5px;
  clip-path: polygon(50% 0, 75% 25%, 100% 25%, 100% 100%, 0 100%, 0 25%, 25% 25%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  z-index: 0;
  transition: transform 0.5s ease;

}
.kogsanuda:focus:after {
  animation: topBottom 1s linear;
}
@keyframes topBottom {
  0%{
  transform: translateY(-70%);
  opacity: 0.3;
  }
  30%{
  transform: translateY(-50%);
  opacity: 0.9;
  }
  70%{
  transform: translateY(-70%);
  opacity: 0.7;
  }
  100%{
  transform: translateY(-80%);
  opacity: 0;
  }
}

.krasivaya_snova:hover .fa-facebook{
  color: #4267b2;
}
.krasivaya_snova:hover .fa-instagram{
  color: #da5556;
}
.krasivaya_snova:hover .fa-twitter{
  color: #38b8ff;
}
.krasivaya_snova:hover .fa-telegram{
  color: #28a1da;
}
.krasivaya_snova:hover .fa-viber{
  color: #6a3891;
}
.krasivaya_snova:hover .fa-github{
  color: #000000;
}
.krasivaya_snova:hover .fa-youtube{
  color: #fe0000;
}
.krasivaya_snova:hover .fa-whatsapp{
  color: #19930a;
}
.krasivaya_snova:hover .fa-envelope{
  color: #d54b3d;
}
.krasivaya_snova:hover .fa-facebook-messenger{
  color: #009cfd;
}
.krasivaya_snova:hover .fa-linkedin{
  color: #0077b5;
}
.krasivaya_snova:hover .fa-codepen{
  color: #000000;
}
.krasivaya_snova:hover .fa-google{
  color: #fabb05;
}
.krasivaya_snova:hover .fa-google-play{
  color: #00c0ff;
}
.krasivaya_snova:hover .fa-cc-visa{
  color: #004c9a;
}
.krasivaya_snova:hover .fa-paypal{
  color: #012069;
}
.krasivaya_snova:hover .fa-user{
  color: #000000;
}
.krasivaya_snova:hover .fa-users{
  color: #000000;
}
.krasivaya_snova:hover .fa-amazon{
  color: #040404;
}
.krasivaya_snova:hover .fa-tiktok{
  color:#ff004f;
}
.krasivaya_snova:hover .fa-pinterest{
  color: #bd081b;
}
.krasivaya_snova:hover .fa-file-code{
  color: #000000;
}
.krasivaya_snova:hover .fa-yandex-international{
  color: #f00;
}
.krasivaya_snova:hover .fa-firefox{
  color: #fea346;
}
.krasivaya_snova:hover .fa-opera{
  color: #e81528;
}
.krasivaya_snova:hover .fa-windows{
  color: #2376bc;
}
.krasivaya_snova:hover .fa-apple{
  color: #666;
}
.krasivaya_snova:hover .fa-university{
  color: #000000;
}
.krasivaya_snova:hover .fa-music{
  color: #d078b9;
}
.krasivaya_snova:hover .fa-font-awesome{
  color: #4c6ef5;
}

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

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

13 Ноября 2020 Загрузок: 3 Просмотров: 1486 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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