ボタンをhoverしたときに背景色をスライドさせる
これのこと
HTML
<button type="button">Button</button>
ボタン部分
button { background-color: #fff; width: 200px; display: block; padding: 10px 0; border: 1px solid #000; position: relative; z-index: 1; } button:hover { color: #fff; }
ボタン背景部分
button::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; background-color: #000; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; } button:hover::before { transform-origin: left top; transform: scale(1, 1); }
要点
transform: scale(0, 1);
で疑似要素の背景を非表示にしておく- hoverしたときに
transform: scale(1, 1);
にして表示する - あとは
transform-origin
でスライドさせたい方向の値を指定する
コード全文
button { background-color: #fff; width: 200px; display: block; padding: 10px 0; border: 1px solid #000; position: relative; z-index: 1; } button:hover { color: #fff; } button::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; background-color: #000; transform-origin: right top; transform: scale(0, 1); transition: transform 0.3s; } button:hover::before { transform-origin: left top; transform: scale(1, 1); }
その他
感想
右から左、みたいに特定の方向に向かってスライドさせたい場合っていちいち疑似要素使わなかん感じ?クソめんどくね?