• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Мигающая кнопка при наведение на CSS (Делаем каркас анимированной кнопки при помощи стилей CSS3)
Мигающая кнопка при наведение на CSS
Kosten
Среда, 13 Февраля 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
Эта кнопка, которая при наведение клика начинает мигать, а по умолчанию она не отличается от других. Но разве, что самостоятельно выстроить дизайн, но не трогать сам эффект. Так как он также настраивается, где есть варианты поставить тень, так как при мигание она появляется, и визуально просматривается пульсация.



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 — коды » Мигающая кнопка при наведение на CSS (Делаем каркас анимированной кнопки при помощи стилей CSS3)
  • Страница 1 из 1
  • 1
Поиск: