Kosten | Среда, 13 Февраля 2019, 03:37 | Сообщение 1 |
| Эта кнопка, которая при наведение клика начинает мигать, а по умолчанию она не отличается от других. Но разве, что самостоятельно выстроить дизайн, но не трогать сам эффект. Так как он также настраивается, где есть варианты поставить тень, так как при мигание она появляется, и визуально просматривается пульсация.
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; }
Демонстрация
| Страна: (RU) |
| |