下線が中央から伸びるテキストボタン
このボタンは、テキストの下に細い下線があり、ホバーで中央から左右へスーッと伸びるミニマルな部品です。下線は ::after の擬似要素で作り、初期状態は left: 50% と width: 0 で中央の点として置き、 translateX(-50%) で中心をそろえています。
解説
このボタンは、テキストの下に細い下線があり、ホバーで中央から左右へスーッと伸びるミニマルな部品です。下線は ::after の擬似要素で作り、初期状態は left: 50% と width: 0 で中央の点として置き、translateX(-50%) で中心をそろえています。ホバーで width を 100% へ広げると、中央を起点に左右対称に線が成長します。背景や枠を持たないテキストリンク調で、CSS のみで動きます。
使う場面
- ポートフォリオの「VIEW PROJECTS」などミニマルな導線
- ブランドサイトのナビゲーションやフッターのテキストリンク
- 余白を活かしたデザインで主張を抑えたい CTA
下線の色は ::after の background、太さは height、伸びる速さは transition の秒数で調整します。左から伸ばしたい場合は left と translateX を変えて起点をずらします。見た目がテキストに近く操作できると気づきにくいことがあるため、cursor: pointer と十分な余白を確保し、フォーカス時にも下線が見えるよう :focus-visible を整えておくと使いやすくなります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
下線はどこから伸び始めますか
中央から左右対称に伸びます。擬似要素の下線を left: 50% と translateX(-50%) で中央にそろえ、ホバーで width を 100% に広げているためです。起点を変えれば左端などから伸ばすこともできます。
下線の色や太さを変えられますか
擬似要素 after の background で色を、height で太さを変えられます。伸びる速さは transition の秒数で調整します。背景や枠は持たないので、文字色との対比だけ確認してください。