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

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

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

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

Так смотрятся на светлом формате сайта:

Кнопки на CSS для сайта, который на чистом CSS

HTML

Код

<div class="amsurem-kimsadelar text-center">
  <h1 class=""> Анимированные кнопки</h1>
  <a class="rainbow pervaya">ZorNet.Ru №1<a/>
  <a class="rainbow vtoraya">ZorNet.Ru №2<a/>
  <a class="rainbow vetusa">ZorNet.Ru №3<a/>
  <a class="rainbow ketvebsa">ZorNet.Ru №4<a/>
  <div>

CSS

Код

body{
  font-family: 'Nunito', sans-serif;
  background: #2e0c35;
}

.a{color: #e03b42}
.b{color: #e27c13}
.c{color: #e8db0c}
.d{color: #11a25a}
.e{color: #12a7bd}
.f{color: #722382}

.amsurem-kimsadelar{
  margin-top: 150px;
}

.text-center {
  text-align: center;
}

.rainbow {
  background-color: #464c52;
  border-radius: 4px;
  color: #f5efef;
  cursor: pointer;
  padding: 10px 15px;
  border: 2px solid #a9a5a5;
  box-shadow: 0px 4px 10px rgba(183, 180, 180, 0.38), 0px 10px 30px -15px rgba(37, 36, 36, 0.72);
}

.pervaya:hover{
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
  animation:slidebg 5s linear infinite;
}

.vtoraya:hover {
  background-image: linear-gradient(to right, #ff1212, #ec9e0d, #f1f10c, #0b860b, #0a0af3, #4d0582, #ec7cec, #f91111);
  animation: slidebg 2s linear infinite;
}

.vetusa:hover{
  background-image: linear-gradient(to right, #ff1212, #ec9e0d, #f1f10c, #0b860b, #0a0af3, #4d0582, #ec7cec, #f91111);
  animation:slidebg 2s linear infinite;
}

.ketvebsa:hover{
  background-image: linear-gradient(
  to right,
  #de343b,
  #e47f18,
  #f1e309,
  #099851,
  #10b4cc,
  #702380
  );
  animation:slidebg 2s linear infinite;
}

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

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

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

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

12 Декабря 2019 Загрузок: 1 Просмотров: 887 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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