FaceHost
FaceHost
Домены
Хостинг
Виртуальные сервера (VPS)
Конструктор сайтов
Облачные сервисы
Партнерская программа
Как создать hover эффект кнопок сайта animejs
1,00
р.
р.
Зашел случайно на сайт animejs
Очень понравились hover эффект их основных кнопок везде искал но подобного эффекта не нашел даже у них на сайте подобного нету
.btn { width:100px height:40px text-align:center padding:5px line-height:2.3 border:1px solid red }
button
До эффекта
После
Ответ
Вроде похоже.
let up = document.getElementById("up"),
down = document.getElementById("down"),
hoverBlock = document.getElementById("hover-block")
hoverBlock.addEventListener("mouseenter", function(e) {
up.beginElement()
console.log
})
hoverBlock.addEventListener("mouseout", function(e) {
down.beginElement()
}) * {
margin: 0
padding: 0
}
html,
body {
width: 100%
height: 100%
background: #222
}
#wrap {
position: relative
width: 220px
height: 70px
background: transparent
}
#hover-block {
cursor: pointer
background: rgba(0, 0, 0, 0)
position: absolute
top: 20px
left: 20px
width: 180px
height: 30px
z-index: 1111
}
p {
position: absolute
width: 100%
height: 100%
color: white
text-align: center
line-height: 3.8
letter-spacing: 5px
font-size: 1.2rem
font-family: ''
transition: all .3s
}
#hover-block:hover~p {
font-size: 1.2rem
transition: all .3s
font-size: 1.6rem
line-height: 2.7
color:orange
}
svg{background: transparent position:absolute }
GitHub
Left
Right