Как создать 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