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

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

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

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

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

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

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

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

Код
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

HTML

Код
<div class="sotsialnaya_sukaknopes">
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-facebook anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-instagram anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-twitter anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-telegram anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-viber anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" target="_blank" href="#">
  <i class="fab fa-github anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-youtube anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-whatsapp anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fas fa-envelope anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-facebook-messenger anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-linkedin anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-codepen anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-google anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-google-play anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-cc-visa anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-paypal anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fas fa-user anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fas fa-users anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-amazon anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-tiktok anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fab fa-pinterest anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fas fa-file-code anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-yandex-international anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-firefox anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-opera anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-windows anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-apple anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fas fa-university anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fas fa-music anacok_dolsenua"></i>
  </a>
  <a class="krasivaya_snova" href="#">
  <i class="fab fa-font-awesome anacok_dolsenua"></i>
  </a>
  </div>

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

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

Демонстрация
2020-11-13 Загрузок: 1 Просмотров: 282 Комментарий: (0)

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

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

Оставь свой отзыв

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