こんにちは。ささめまです。
シンプルでスタイリッシュなマウスオーバーエフェクトをご紹介します。
（2021/03/08時点で当サイトのヘッダーメニューに採用しています。）
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</a>.button_link {
color: #81d8d0;
text-decoration: none;
position: relative;
}
.button_link:hover {
transition: 0.3s ease;
}
.button_link::after {
display: block;
content: '';
height: 1px;
position: absolute;
bottom: -6px;
left: 50%;
width: 0;
height: 1px;
background: #81d8d0;
transition: 0.3s ease;
transform: translateX(-50%);
}
.button_link:hover::after {
width: 100%;
transition: 0.3s ease;
}design
横幅0の線をposition: absolute;で中央に配置し、:hoverで0.3秒かけて横幅100%になるcssです。
マウスオーバーすると、スッというか、ふわっというか、ツーーというか、内側から外側へ伸びるように下線がアニメーションします。
シンプルで簡単なので、アイデアの引き出しに入れておきたい記述です。
