テキストの「塗り」を消して、輪郭線だけを残す。それだけで、ボタンがガラッと変わります。-webkit-text-stroke はCSSでテキストに枠線をつけるプロパティです。color: transparent と組み合わせると、文字の形だけが浮かぶアウトラインスタイルが作れます。ブルータリズム系や海外ポートフォリオで定番になっていて、「今っぽいUI」の代名詞になりつつあります。
全5デモ、JavaScriptは不要。コピペしてそのまま使えます。ホバーで塗りが入るもの、虹色に変化し続けるもの、大文字を主役にしたヘッドライン型まで。Chrome・Firefox・Safari・Edgeのモダンブラウザはすべて対応しています。
Stroke Fill（ストローク・フィル）
-webkit-text-stroke でテキストに輪郭線を引き、color: transparent で塗りを抜いた状態が「通常」のスタイルです。ホバーすると背景が埋まりながらテキストが白に変わり、アウトラインスタイルと塗りスタイルがスムーズに切り替わります。シンプルな仕組みですが、before/afterなしで完結するのが気持ちいい。コーポレートサイトのCTAや、テキスト主体のLPで「控えめだけどクールなボタン」を使いたいときの定番です。
See the Pen Stroke Fill by BaseKENT (@basekent) on CodePen.
調整方法
- 輪郭線の太さ:
-webkit-text-stroke: 2px #3b82f6の2pxを1pxにするとシャープに、3pxにするとより主張が強くなります - 文字サイズと太さ:
font-sizeとfont-weight: 900はセットで変えると、アウトラインのバランスが取りやすいです - カラー:
-webkit-text-stroke、border-color、ホバー時のbackgroundを同じ色に揃えると統一感が出ます
Slide Reveal（スライド・リビール）
通常はアウトラインテキスト、ホバーすると塗りが左から右へスライドして入ってくるデザインです。::before 擬似要素に content: attr(data-text) でボタンテキストを複製し、clip-path: inset(0 100% 0 0) で右端まで隠した状態から、ホバーで inset(0 0% 0 0) へアニメーションします。clip-pathで切り抜く量を変えることで、ワイプインサートの動きを作っています。
HTMLに data-text="BUTTON" 属性が必要です（例: <a href="#" class="btn" data-text="BUTTON">BUTTON</a>）。それ以外はCSSだけで完結します。
See the Pen Slide Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- スライドの速度:
transition: clip-path 0.4sの秒数を変えるとリビールのテンポが変わります - イージング:
cubic-bezier(0.4, 0, 0.2, 1)をease-in-outにするとより柔らかい動きになります - 右から左への逆方向:
inset(0 0 0 100%)→inset(0 0 0 0%)に変えると逆方向スライドになります
Stroke Glow（ストローク・グロウ）
暗い背景の上にアウトラインテキストを置き、filter: drop-shadow でネオンライトのような発光を加えたデザインです。box-shadow はテキスト形状には作用しませんが、filter: drop-shadow はボタン全体（テキストの輪郭線も含む）に影響するため、文字の枠線そのものが光って見えます。ホバーすると発光がより強くなり、暗い背景と相まってネオンサイン的な印象になります。
ポートフォリオサイトのダーク系デザイン、音楽系・ゲーム系のLPのCTAボタンとして映えます。
See the Pen Stroke Glow by BaseKENT (@basekent) on CodePen.
調整方法
- 発光の強さ:
:hoverのdrop-shadowの値を0 0 20px #a855f7のように広げると発光が拡散します - 発光色:
-webkit-text-stroke-colorとdrop-shadowの色を同じにすると発光の自然さが増します - 背景色:
background: #0f0f1aを他のダークカラーに変えても雰囲気が出ます。純黒より少し色みのある暗色が光の印象を引き立てます
Hue Spin（ヒュー・スピン）
filter: hue-rotate(360deg) のアニメーションで、ボタン全体の色相が虹色に回り続けるデザインです。テキストの輪郭線・ボーダー、どちらも同時に色が変化します。実装はシンプルで、animation: hue-spin 4s linear infinite を一行加えるだけ。ループ再生が続くため、ページに1個だけ使うのがポイントです。目を引きたいメインCTAとして機能しますが、複数置くと賑やかすぎるので使い所は絞りましょう。
See the Pen Hue Spin by BaseKENT (@basekent) on CodePen.
調整方法
- 回転速度:
4sを2sにすると速く、8sにするとゆっくり変化します - 基準色:
-webkit-text-strokeとborder-colorの初期色を変えると、虹色の「出発点」が変わり印象が変わります - 一時停止:
:hover { animation-play-state: paused }を加えると、ホバー中に回転が止まります
Headline Bold（ヘッドライン・ボールド）
font-size: 2.2rem の大文字をアウトラインで表示し、見出しとボタンの中間のようなデザインです。ミニマルなLPや一枚ものポートフォリオで、テキスト自体をヒーローセクションの主役に据えるスタイルに合います。ホバーすると塗りが入りつつ transform: skew(-4deg) で微妙に傾き、停止した文字が「動き出す」ような感覚を演出しています。border-radius: 0 でシャープな四角のままにしているのも、大文字アウトラインとの相性を意識した選択です。
See the Pen Headline Bold by BaseKENT (@basekent) on CodePen.
調整方法
- フォントサイズ:
2.2remを変えるとボタン全体の存在感が変わります。3rem以上にするとより「見出しのようなボタン」感が出ます - スキュー角度:
:hoverのtransform: skew(-4deg)の値を増やすと傾きが強くなります。0degにするとシンプルなフィルインのみになります - 大文字・小文字:
text-transform: uppercaseを外すと小文字表記になり、柔らかい印象に変わります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
