Bouton déroulant

HTML

<button class="button buttonAni">06 60 60 60 60</button>

 

CSS

.buttonAni {
padding: 10px;
line-height: 16px;
}
.buttonAni div {
display: flex;
overflow: hidden;
text-shadow: 0 16px 0 black;
}
.buttonAni div span {
display: block;
backface-visibility: hidden;
transition: transform .44s ease;
transform: translateY(var(--m)) translateZ(0);
}
.buttonAni div span:nth-child(1) {
transition-delay: 0.05s;
}
.buttonAni div span:nth-child(2) {
transition-delay: 0.1s;
}
.buttonAni div span:nth-child(3) {
transition-delay: 0.15s;
}
.buttonAni div span:nth-child(4) {
transition-delay: 0.2s;
}
.buttonAni div span:nth-child(5) {
transition-delay: 0.25s;
}
.buttonAni div span:nth-child(6) {
transition-delay: 0.3s;
}
.buttonAni div span:nth-child(7) {
transition-delay: 0.35s;
}
.buttonAni div span:nth-child(8) {
transition-delay: 0.4s;
}
.buttonAni div span:nth-child(9) {
transition-delay: 0.45s;
}
.buttonAni div span:nth-child(10) {
transition-delay: 0.5s;
}
.buttonAni div span:nth-child(11) {
transition-delay: 0.55s;
}
.buttonAni div span:nth-child(12) {
transition-delay: 0.60s;
}
.buttonAni div span:nth-child(13) {
transition-delay: 0.65s;
}
.buttonAni div span:nth-child(14) {
transition-delay: 0.70s;
}
.buttonAni div span:nth-child(15) {
transition-delay: 0.75s;
}
.buttonAni div span:nth-child(16) {
transition-delay: 0.80s;
}
.buttonAni div span:nth-child(17) {
transition-delay: 0.85s;
}
.buttonAni:hover {
--y: -4px;
--shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);
}
.buttonAni:hover span {
--m: calc(18px * -1);
}

 

JS

<script>
document.querySelectorAll('.buttonAni').forEach(button => button.innerHTML = '<div><span>' + button.textContent.split(' ').join('</span>&nbsp<span>') + '</span></div>');
</script>