• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Мигающая кнопка при наведение на CSS (Делаем каркас анимированной кнопки при помощи стилей CSS3)
Мигающая кнопка при наведение на CSS
Kosten
Дата: Среда, 2019-02-13, 03:37 | Сообщение 1
Администраторы
Сообщений:19882
Награды: 56


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



HTML

Код
<div id="nadeprecia-kegoubranyduken">
  <button class="transition hover">Наведите на пульс</button>
</div>


CSS

Код
@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-o-keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}

#nadeprecia-kegoubranyduken {
  width:263px;
  margin:8px auto;
}
#nadeprecia-kegoubranyduken button {
    width: 270px;
    height: 45px;
    background: #36689a;
    border: 2px solid #5d5757;
    border-color: rgba(23, 44, 95, 0.5);
    font-size: 18px;
    color: #fff;
    text-shadow: rgba(41, 38, 38, 0.56) 1px 1px 5px;
    text-align: center;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-box-shadow: 0 0 16px rgba(85, 160, 206, 0.5);
    box-shadow: 0 0 16px rgba(102, 181, 232, 0.5);
    cursor: pointer;
}
#nadeprecia-kegoubranyduken button:hover, #nadeprecia-kegoubranyduken button.hover_effect {
    background-color: #0d496b;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: glow;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-name: glow;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    -o-animation-timing-function: ease-in-out;
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}


Демонстрация
Прикрепления: 2827745.png(11.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Мигающая кнопка при наведение на CSS (Делаем каркас анимированной кнопки при помощи стилей CSS3)
  • Страница 1 из 1
  • 1
Поиск: