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

Красивые кнопки CSS с анимацией радуги

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

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

Он имеет различные кнопки, которые реализуют эффект цвета радуги при нажатии или наведении курсора. Простое CSS и HTML-кодирование используются для отображения эффекта. Также веб разработчик может задействовать кнопки для минимального и упрощенного подхода, чтобы использовать его на сайте.

Так выглядят кнопки на светлом фоне:

Приступаем:

HTML

Код

<a class="amepatag nteractiven-1" href="#">Скачать</a>
<a class="amepatag kelements-2" href="#">Скачать</a>
<a class="amepatag vomebing-3"href="#">Скачать</a>
<a class="amepatag nestamed-4"href="#">Скачать</a>
<a class="amepatag mesognized-5"href="#">Скачать</a>

CSS

Код

.amepatag {
  background-color: #21568c;
  border-radius: 5px;
  color: #f7f2f2;
  cursor: pointer;
  padding: 10px 20px;
  text-decoration: none;
  border: 2px solid #c3c6cc;
}

.nteractiven-1:hover {
  background-image: linear-gradient(90deg, #0cb4ea 0%, #efc510 49%, #e63333 80%, #08b6ef 100%);
  animation: slidebg 5s linear infinite;
}

.kelements-2:hover {
  background-image: linear-gradient(to right, #f10c0c, #ea9b09, #e8e80b, #079607, blue, #570a90, #e86fe8, #f70e0e);
  animation: slidebg 2s linear infinite;
}

.vomebing-3:hover{
  background-image: linear-gradient(to right, #f11414, #ef9f0d, #e8e80e, #0fa70f, #0d0de4, #580a92, #d60505);
  animation:slidebg 2s linear infinite;
}

.nestamed-4:hover{
  background-image: linear-gradient( to right, #dc3b42, #e68016, #e6d90d, #0f9c56, #0b9cb1, #581a65 );
  animation:slidebg 2s linear infinite;
}

.mesognized-5:hover{
  background-image: linear-gradient( to right, #cc3239, #e4363e 16.65%, #e6831d 16.65%, #e2801b 33.3%, #e2d60e 33.3%, #e4d70b 49.95%, #16a55d 49.95%, #13ad60 66.6%, #10b2ca 66.6%, #16a8bd 83.25%, #812494 83.25%, #791d8c 100%, #e43b42 100% );
  animation:slidebg 2s linear infinite;
}

@keyframes slidebg {
  to {
  background-position:20vw;
  }
}

.follow{
  margin-top: 40px;
}

.follow a{
  color: black;
  padding: 10px 20px;
  text-decoration: none;
}

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

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

12 Июня 2019 Загрузок: 2 Просмотров: 1246 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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