「ボタンらしくないのに、なぜかクリックしてしまう」——そんな体験をしたことはないですか。塗りも枠もなく、テキストとほんの少しの動きだけで構成されたリンク。ラグジュアリーブランドのサイトや洗練されたポートフォリオでよく見かける、ミニマリズムの極致を突いたCTAです。引き算の美学と呼んでいいかもしれません。
この記事では、背景もボーダーも使わず ::before / ::after の疑似要素と clip-path だけで完成するテキストリンク型ボタンを5種類紹介します。CSSのみで実装しているためJavaScriptは不要。WordPressやSWELLのCSSエディタにそのままコピペして使えます。
Underline Slide（アンダーライン・スライド）
テキストリンクアニメーションの中で最も使用頻度が高いといっていいデザインです。ホバー前は下線なし、ホバー時に左から右へ下線がスライドして伸びる。シンプルに見えて、cubic-bezier(0.4, 0, 0.2, 1) という、Googleが設計した加速・減速カーブが仕込まれています。直線的なイージングとは明らかに質感が違う。
実装は ::after 疑似要素を width: 0 から width: 100% へ遷移させるだけです。position: absolute でテキストの真下に固定し、bottom: 0 で追従させます。テキストリンク・ナビゲーション・ブログ記事中のCTAリンクまで、場所を選ばず使える汎用性が最大の強みです。
See the Pen Underline Slide by BaseKENT (@basekent) on CodePen.
調整方法
- 下線の色:
a::afterのbackground: #222を変更します。本文テキストと同色にすると統一感が出ます。ブランドカラー（例:#e74c3c）にするとアクセントとして映えます - 下線の太さ:
height: 2pxを1pxにするとよりシャープに、3pxにするとボールドな印象になります - アニメーション速度:
transition: width 0.35sの秒数を変えます。0.2sでスナッピーに、0.6sでゆっくりした印象になります
Double Underline（ダブル・アンダーライン）
テキストの上下両端から同時に線が伸びる、少しフォーマルな印象のデザインです。::before が上、::after が下を担当し、両方が left: 50% を起点に左右へ広がる——その「中央から対称に開く」動きが、一本線にはない厳かさを生みます。コーポレートサイトのグローバルナビ・展示会系ページのCTAに置くと、テキストリンクなのにどこか格式ばった空気が出ます。
transform: translateX(-50%) で中央揃えした疑似要素を width: 0 から width: 100% へ伸ばします。上下2本が同じタイミングで動くため、1本のアニメーションより視線誘導が強い。線の細さを height: 1.5px に抑えることで、存在感を出しつつ主張しすぎない絶妙なバランスを保っています。
See the Pen Double Underline by BaseKENT (@basekent) on CodePen.
調整方法
- 線の色:
a::before, a::afterのbackground: #222を変更します。上下で色を分けたい場合は、a::before { background: #888; }とa::after { background: #222; }で個別に指定できます - 線の太さ:
height: 1.5pxを2pxにするとより主張が強くなります。1pxにするとラグジュアリーな繊細さが際立ちます - アニメーション速度:
transition: width 0.4sで上下同時に動きます。0.6s以上にすると「ゆっくり閉じていく」上品な演出になります
Erase Rewrite（イレース・リライト）
「下線が消えて、別の色で書き直される」——そんな見せ方をするデザインです。ホバーすると既存の下線が右から消え、0.25秒後に別色の線が左から登場します。まるで誰かがボールペンでさっと線を引き直したような演出で、見た人が「あ、動き変わった」と二度見するインタラクションです。
transform: scaleX() の transform-origin を @keyframes のキーフレームの中間地点（49%→50%）で right から left に切り替えるのが実装の核心です。transition ではなく animation で制御するため、ホバー状態を維持している間だけアニメーションが発火します。テキストの色も transition: color 0s 0.25s の遅延指定で、ちょうど線の書き直し完了と同タイミングで変化します。個人ポートフォリオ・エージェンシーサイトのCTAに最適なひとひねりの演出です。
See the Pen Erase Rewrite by BaseKENT (@basekent) on CodePen.
調整方法
- 書き直し前の色:
@keyframesの0%と49%のbackground: #222を変更します。デフォルト状態の線色です - 書き直し後の色:
50%と100%のbackground: #c0392b（赤）を変更します。テキストのa:hover { color: #c0392b; }も同じ色に合わせるとまとまります - アニメーション速度:
animation: erase-rewrite 0.5sの秒数を変えます。0.4sでテンポよく、0.8sでゆったりとした「書き直し感」が強まります
Arrow Inline（アロー・インライン）
テキストの末尾に矢印が滑り込んでくるデザインです。ホバー前はテキストのみ、ホバーすると → が左からフェードインしながら自然な間隔でテキストに寄り添う。「もっと読む」「詳しく見る」系のCTAに置くと、クリックを促す意図がアイコンで補強されます。テキストだけより行動喚起の力が上がるのに、見た目はミニマルなまま。
::after { content: '→' } を opacity: 0 かつ transform: translateX(-6px) で初期状態は透明・少し左に配置し、ホバーで opacity: 1 + translateX(0) + margin-left: 6px へ遷移させます。3つのプロパティが同時に補間されることで「矢印がスッと横にスライドして現れる」自然な動きになります。文章中リンク・ブログ記事CTAボタン・カードコンポーネントのリンクと、使い道が広いデザインです。
See the Pen Arrow Inline by BaseKENT (@basekent) on CodePen.
調整方法
- 矢印の種類:
content: '→'を'›'（シングルシェブロン）・'▶'（三角）・'↗'（斜め矢印）に変えられます。サイトの文体に合わせて選んでください - 矢印の間隔:
margin-left: 6pxの数値を変えます。4pxで密着感、10pxでゆとりのある印象になります - アニメーション速度:
transitionの0.25sを0.4sにすると、矢印が「ゆっくりと手招きする」ような動きになります
Clip Reveal（クリップ・リビール）
薄いグレーで表示されているテキストが、ホバーで濃いブラックに塗り替えられていく——clip-path を使ったテキストカラーのワイプ演出です。通常のテキストカラー遷移（単純なフェード）と違い、左から右へ「色が塗られていく」ように見えます。Webサイトのヒーローエリアや、主要CTAに置いたとき、目が止まる動きをします。
::before 疑似要素に content: attr(data-text) で元のテキストと同じ文字を重ね置きし、clip-path: inset(0 100% 0 0) で初期状態は完全に隠しておきます。ホバーで clip-path: inset(0 0% 0 0) へ遷移させると、左から右へクリッピング領域が広がり「テキストが塗られていく」演出になります。HTMLに data-text="テキスト" 属性を追加する必要がありますが、CSSだけで完結するユニークな実装です。
See the Pen Clip Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- ホバー前の色:
a { color: #bbb; }を変更します。#cccでより薄く、#888でやや主張のある初期状態になります - ホバー後の色:
a::before { color: #222; }を変更します。ブランドカラーやアクセントカラーを指定すると個性が出ます - ワイプ速度:
transition: clip-path 0.4sの秒数を変えます。0.3sでシャープなワイプ、0.7sでゆっくりと「塗り広げる」演出になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
