派手なエフェクトをやめたとき、ボタンは本当に使いやすくなりました。グラデーション・グロウ・立体感──盛り込めば盛り込むほど、CTAとしての「押してほしい」という意図が霞んでいく経験があります。「アクセントライン」は、その逆の発想です。線一本だけ動かす。それだけで、テキストリンクの無機質さを超えた誘導力が生まれます。::before / ::after に height: 2px の細いラインを仕込み、transform: scaleX() や width のトランジションで伸ばす。実装の軽さ・ブラウザ互換性・デザインへの馴染みやすさ、すべてで優秀なテクニックです。
全5デモ、JavaScriptなし、CSSのみで実装しています。左から右へ伸びる定番から、中央から両側へ広がるもの、上下2本が逆方向から現れるもの、縦ラインが生えるもの、外側からボタンを囲むアウトラインまで、1本ずつ動きが異なる構成です。WordPress / SWELLへのコピペもそのまま使えます。
Underline Slide（アンダーライン・スライド）
ホバーすると、ボタンテキストの下に青いラインが左から右へ静かに伸びます。::after に width: 0 を初期値として設定し、ホバーで width: 100% へトランジションするだけの、最もシンプルな実装です。背景もボーダーも持たないテキストリンク型のボタンに組み合わせるのが特に映えます。ナビゲーション・フッターリンク・見出し横のCTAなど、「さりげなく誘導したい」場面に向いています。ease のイージングで減速しながら伸び切るため、右端で自然に止まる感触があります。全デモ中で最も実装が軽く、学習用途・実務用途ともに出発点になるデモです。
See the Pen Underline Slide by BaseKENT (@basekent) on CodePen.
調整方法
- ライン色:
background: #38bdf8をブランドカラーに変えてください。linear-gradient(90deg, #38bdf8, #818cf8)にするとグラデーションラインになります - 太さ:
height: 2pxを3pxにするとより存在感のあるラインに、1pxにするとより繊細な印象になります - 位置:
bottom: 6pxの値を調整するとテキストとラインの距離が変わります。bottom: 0にするとテキスト直下に密着します
Center Out（センター・アウト）
ホバーすると、ラインがテキストの真ん中から両側へ同時に広がります。transform: scaleX(0) → scaleX(1) のトランジションに transform-origin: center を指定することで、中央を起点に左右対称に展開する動きになります。width トランジションとは異なり、要素幅は常に 100% のまま変わらない（スケール変形で見た目だけ伸び縮みする）ため、ページ内の他のレイアウトに影響を与えません。紫〜インディゴのグラデーションラインがセンターから割れるように広がる動きは、対称性の美しさがあり、中央揃えのナビゲーションリンクや、ヒーローセクションのアンカーリンクに特に向いています。
See the Pen Center Out by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーション:
linear-gradient(90deg, #a855f7, #6366f1)の色を変えることで異なる印象になります。単色（例:background: #6366f1）でも綺麗に動きます - 速度:
transition: transform 0.35s easeの秒数を短くすると切れ味が増します。0.2sでシャープに、0.6sでゆっくり広がる演出になります - transform-origin:
centerをleftに変えると左から右へ伸びる動きに変わります。方向を変えたい場合はここだけ変更すればOKです
Double Line（ダブルライン）
ホバーすると、ボタンの上端と下端から同時にラインが現れます。上ライン（::before）は右から左へ、下ライン（::after）は左から右へと、逆方向に伸びるのがポイントです。transform-origin: right / transform-origin: left でそれぞれの起点を変えているだけで、この非対称な動きが生まれます。2本が「挟み込む」ように収束する動きは、一本ラインよりも強いホバーフィードバックを与えます。テキスト量の多いナビゲーション・目立たせたいサブCTA・タブ切り替えのアクティブ状態に使うと、上下の強調が視線を集めます。
See the Pen Double Line by BaseKENT (@basekent) on CodePen.
調整方法
- 方向の組み合わせ: 上ラインを
transform-origin: left、下ラインをtransform-origin: rightに変えると、両方が外側から中央へ向かって伸びる演出になります - ライン色:
background: #10b981を変えてください。上下で異なる色（::beforeと::afterのbackgroundを別々に指定）にするとさらに個性が出ます - 太さと位置:
height: 2pxを大きくすると上下の「枠感」が強まります。top: 4px/bottom: 4pxを0にするとボタンの縁ぴったりに配置されます
Vertical Slide（バーティカル・スライド）
ホバーすると、テキストの左側に縦ラインが中央から上下へ伸びます。::before に scaleY(0) を初期値として transform-origin: center を指定し、ホバーで scaleY(1) に変化させます。横ラインの記事では「縦方向への転換」が差別化になり、見出し横のCTAや、サイドバーリンク・左揃えのナビゲーションリストに組み込むと引き立ちます。左側に余白（padding-left: 52px）を設けてライン専用のスペースを確保しているため、テキストとラインが重なることなく並びます。シンプルな縦のアクセントが、テキストと同じ高さで揃うことで全体のリズムが出ます。
See the Pen Vertical Slide by BaseKENT (@basekent) on CodePen.
調整方法
- ラインの太さ:
width: 3pxを変えると縦ラインの幅が変わります。2pxで繊細に、4px以上でより目立つ縦アクセントになります - ラインの色:
background: #f59e0bをブランドカラーに変えてください。border-radius: 2pxが角丸処理なので、太くしても丸みが保たれます - 位置:
left: 18pxの値を変えると、テキストとラインの距離が変わります。合わせてpadding-leftも同様に調整してください
Border Trace（ボーダー・トレース）
ホバーすると、ボタンの外側に離れた位置からアウトラインが収束してきます。outline-offset: 14px（ボタンから14px離れた位置）と outline-color: transparent がデフォルト状態で、ホバーで outline-color: #f43f5e・outline-offset: 5px に変化します。CSSの outline プロパティは border と異なりレイアウトに影響を与えないため、ボタン外側への演出がとても扱いやすいです。遠くから枠が迫ってくるような「収束する枠線」の動きは、他のラインアニメーションとは異なる空間的な演出です。ダーク背景のLPやポートフォリオのフィーチャーボタンに使うと独特の存在感が出ます。なお outline-offset のトランジションはChrome・Firefox・Safari最新版で動作を確認しています。
See the Pen Border Trace by BaseKENT (@basekent) on CodePen.
調整方法
- 収束距離:
outline-offset: 14pxの初期値を大きくすると、より遠くからアウトラインが近づいてきます。20px以上にするとダイナミックな演出になります - ホバー時の距離:
outline-offset: 5pxの値を0にするとアウトラインがボタン境界に接触した状態になります。2px程度が自然に見えます - アウトライン色:
outline-color: #f43f5eをブランドカラーに変えてください。太さはoutline: 2px solidの2px部分で調整できます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
