余白が生む緊張感。CSSボタンデザイン「アウトライン／ゴースト」5選

2026年3月15日

当ページのリンクには広告が含まれています。

塗りつぶさない、というデザインの選択がある。背景を持たず、枠線だけで輪郭を主張するゴーストボタン（アウトラインボタン）は、コーポレートサイト・ポートフォリオ・テキスト主体のLPで長年使われ続けてきた定番スタイルです。「目立ちすぎず、でも確かに存在している」——そんな絶妙なバランスが、ページ全体のトーンを崩さずにCTAを設置できる理由です。

今回紹介するのは、このゴーストボタンを軸に、ホバー時の動きにバリエーションを持たせた5本。すべてCSSのみで実装していて、JavaScriptは使いません。コピペのままWordPress/SWELLに貼り付けて動作します。用途や雰囲気に合わせて、お好みのスタイルを選んでみてください。

Slide Fill（スライド・フィル）

See the Pen Slide Fill by BaseKENT (@basekent) on CodePen.

ゴーストボタンのホバーエフェクトとして、もっとも広く使われているパターンです。ホバーした瞬間、左から右へ塗りがスライドしてくる。その動きがまるで「引き出しが開く」ような感覚で、シンプルながら視線をしっかり引きつけます。

::before 疑似要素を transform: translateX(-100%) で画面外に待機させておき、ホバー時に translateX(0) へ動かす仕組みです。z-index: -1 を使ってテキストの背後に滑り込ませているので、文字が邪魔されずに読めます。コーポレートサイトの「お問い合わせ」ボタンにそのまま使えるような品の良さがあります。

調整方法

塗りの色: .btn::before の background: #333 をお好みの色に変更してください
スライド速度: transition: transform 0.35s ease の秒数を変えると速さが変わります。0.2s でシャープに、0.5s でゆっくりと
枠線の太さ: border: 2px solid #333 の 2px を 1px にするとより細くスタイリッシュな印象に

Fade In Fill（フェード・イン・フィル）

See the Pen Fade In Fill by BaseKENT (@basekent) on CodePen.

スライドの動きを持たない、最もシンプルなゴーストボタンの実装例です。ホバーすると、じわっと背景色が浮かび上がる。「動き」よりも「変化」を感じさせる演出で、ゆっくりとしたフェードが品の良さを演出します。

実装は background と color に transition をかけるだけ。疑似要素も z-index も不要なので、CSSの量が最も少ないデモです。「余計なことをしない」ことがデザインになっているとも言える。ブログの記事内リンクや、控えめなサイドバーCTAに向いています。

調整方法

ボタンカラー: color: #4f63d2 と border-color、background: #4f63d2 をまとめて変えれば別カラーにできます
フェード速度: transition: background 0.4s ease の秒数を調整。0.6s 以上にすると、ほとんど溶けるような変化に
角丸: border-radius: 8px を追加するとまるみが出て、よりフレンドリーな印象になります

Scale In Fill（スケール・イン・フィル）

See the Pen Scale In Fill by BaseKENT (@basekent) on CodePen.

塗りが「下から押し上げられる」ように広がるホバーエフェクトです。Slide Fillが横方向のスライドなのに対し、こちらは縦方向のスケールアップ。::after 疑似要素を scaleY(0) でつぶしておき、ホバーで scaleY(1) に展開します。transform-origin: bottom を指定することで、下から上に向かって塗りが伸びていく演出になります。

縦に動く塗りは「地面から何かが生えてくる」ような有機的な印象があり、クリエイティブ系のポートフォリオや、スポーツ・アウトドア系のLPにも合います。Slide Fillよりも少し主張が強め。ページの中で「押してほしい」ボタンに使うと効果的です。

調整方法

方向を変える: transform-origin: bottom を top にすると上から下に塗りが降りてきます
ボタンカラー: color: #c0392b とあわせて background: #c0392b を同じ色に変えてください
スケール速度: transition: transform 0.35s ease を cubic-bezier(0.23, 1, 0.32, 1) にするとイージングに弾みが出ます

Double Border（ダブル・ボーダー）

See the Pen Double Border by BaseKENT (@basekent) on CodePen.

border と outline の2本の枠線でボタンを囲み、ホバーで外側の outline が収縮・消滅するエフェクトです。通常状態ではボタンの外に余白を持った二重枠が存在していて、「押すと何か起きそう」という期待感を与えます。そしてホバーすると外枠がなくなり、内側だけが塗りで埋まる。一連の動きが、クリックに向けたカウントダウンのような演出になっています。

outline-offset をトランジションで動かすことがポイントで、この値をホバー時に 0 にすると外枠と内枠が重なって見えなくなります。outline はDOMに干渉しないため、隣の要素に影響を与えずに外側に空間を持てるのが border との大きな違いです。outline-offset のトランジションはChromeやFirefox、Edgeの最新版で動作確認しています。

調整方法

外枠の間隔: outline-offset: 5px の数値を大きくするほど外枠との距離が広がります
外枠の太さ: outline: 3px solid の 3px を変えると外枠の存在感が変わります
カラー: color、border-color、outline-color、ホバー時の background を同じ色に統一することで他のカラーにもすぐ切り替えられます

Border Shrink（ボーダー・シュリンク）

See the Pen Border Shrink by BaseKENT (@basekent) on CodePen.

枠線がなく、box-shadow: inset だけでボーダーを表現しているゴーストボタンです。ホバーすると、その inset の値がボタン全体を覆うまで内側に広がって、塗りつぶしに変化します。外側からではなく「内側から満ちていく」という動きが、他の4本とは異なる独特の印象を生みます。

実装は box-shadow: inset 0 0 0 2px から inset 0 0 0 60px へのトランジション。border を使わないため、padding の計算が狂わず扱いやすい。ダーク背景のページに白いゴーストボタンとして置くと、光が灯るような演出になります。ポートフォリオサイトのトップページや、ランディングページのメインCTAとして使うと映えます。

調整方法

枠線の太さ: 通常時の 0 0 0 2px の最後の値を 3px 4px に変えると枠が太くなります
塗りの広がる速さ: transition: box-shadow 0.4s ease の秒数を変えてください。0.3s でキビキビと、0.6s でじっくりと
カラー: box-shadow の色と、ホバー時の color の色を合わせて変更してください