Anime Elastic Button
anime.jsの弾性イージングで押すとぐにゃっと変形するボタン。
HTML
<button class="aeb-btn" id="aeb-btn">Elastic</button>
CSS
.aeb-btn {
padding: 14px 40px;
background: #6366f1;
color: #fff;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
}
JavaScript
document.getElementById('aeb-btn').addEventListener('click', function() {
anime({
targets: this,
scale: [1, 0.85, 1.05, 1],
duration: 600,
easing: 'easeOutElastic(1, 0.3)'
});
});