Split Reveal Button
ホバーで上下にスプリットしてテキストが切り替わるボタン。
HTML
<button class="split-btn" data-text="Go"><span>Go</span></button>
CSS
.split-btn {
position: relative;
padding: 12px 36px;
background: #1a1a1a;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
overflow: hidden;
}
.split-btn span {
display: inline-block;
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.split-btn::after {
content: attr(data-text);
position: absolute;
left: 0; right: 0;
text-align: center;
transform: translateY(120%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.split-btn:hover span { transform: translateY(-120%); }
.split-btn:hover::after { transform: translateY(0); }