« Анимационная кнопка, с использованием CSS и HTML »

Описание материала:

Кнопки не только удобны для навигации пользователя, но и являются чрезвычайно важным элементом дизайна для любого веб-сайта. Поэтому мы решили добавить красивую анимационную кнопку, с использованием CSS стилей и HTML кода. Что представляет она из себя - кнопка с наложением градиента, а при наведении на неё появится красивая анимация цвета с право на лево, в добавок с анимационной тенью. Если вы хоть немного разбираетесь в CSS стилях, то вы легко измените цветовую гамму под свой сайт.

Если вы хотите увидеть как выглядит кнопка, то перейдите по ссылке демонстрация, которая находится после описания к материалу.

Анимационная кнопка, с использованием CSS и HTML

HTML код:
Код
<div class="but_ufive">
  <a target="_blank" href="#">uFive.Ru</a>
</div>


CSS код:
Код
.but_ufive a {
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  padding: 10px 30px;
  border-radius: 5px;
  font-family: sans-serif;
  color: #fff;
  background: linear-gradient(
  90deg,
  #f6d365,
  #fda085,
  #84fab0,
  #8fd3f4,
  #fa709a,
  #fee140
  );
  background-size: 400%;
  z-index: 9;
  font-weight: bold;
}
.but_ufive a::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  background: linear-gradient(
  90deg,
  #f6d365,
  #fda085,
  #84fab0,
  #8fd3f4,
  #fa709a,
  #fee140
  );
  background-size: 400%;
  z-index: -1;
  opacity: 0;
  border-radius: 5px;
}
.but_ufive a:hover::before {
  opacity: 1;
  filter: blur(40px);
  animation: animate 5s linear infinite;
}
.but_ufive a:hover {
  animation: animate 5s linear infinite;
}
@keyframes animate {
  from {
  background-position: 0%;
  }
  to {
  background-position: 400%;
  }
}


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 83


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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