ボタンが「現れる」動作に、これほどのバリエーションがあるとは思っていませんでした。mask-image は、要素をどの部分まで表示するかをグラデーションや図形で制御するCSSプロパティです。clip-path と似ていますが、mask-image はアルファチャンネルを使った滑らかなフェード制御ができるのが特徴で、ワイプ・円形拡張・幻のようなヴィネット効果まで、映像編集ソフトに近い演出を純粋なCSSで実現できます。Safariでは -webkit- プレフィックスが必要ですが、Chrome・Firefox・Safari 最新版ではすべて対応済みです。
全5デモ、JavaScriptなし、CSSのみで実装しています。::before / ::after の z-index を使ったテクニックや複数マスクレイヤーの応用まで、1本ずつ使い方が異なる構成です。WordPress / SWELLへのコピペもそのまま使えます。
Wipe Reveal（ワイプ・リビール）
ページを開いた瞬間、ボタンが左から右へ映像のワイプ転換のように現れます。mask-image: linear-gradient(90deg, black 50%, transparent 50%) と mask-size: 201% 100% を組み合わせ、mask-position を 100% から 0% へアニメーションすることで実現しています。グラデーションを要素の2倍幅で作り、位置を動かすことで「黒（表示）ゾーン」がスライドする仕組みです。
ヒーローセクションのCTAや、訪問者に最初に目を向けてほしいボタンに向いています。ページのファーストビューに置いたとき、他の要素と動きのリズムを合わせると映像的なまとまりが出ます。
See the Pen Wipe Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- スピード:
animation: wipe-reveal 1s easeの秒数を短くするとシャープな入場に、長くするとじわっと現れるスロー演出になります - 方向:
linear-gradient(90deg, ...)を270degにすると右から左、180degにすると上から下のワイプになります - 背景色:
background: linear-gradient(135deg, #3b82f6, #6366f1)をお好みのブランドカラーに変えてください
Radial Expand（ラジアル・エキスパンド）
ホバーすると、ボタンの中心から円形にグラデーションが広がります。暗いダークボタンの内部から、インディゴ〜パープルの光が球状に拡散するような演出です。::before に mask-image: radial-gradient(circle, black 50%, transparent 50%) を適用し、mask-size: 0% 0% からホバーで 300% 300% へ遷移することで、「マスクが外側へ広がってグラデーションが現れる」動きを作っています。
実装のポイントは z-index の使い方です。.btn { z-index: 0 } でスタッキングコンテキストを生成し、::before { z-index: -1 } でグラデーションオーバーレイを、::after { z-index: -2 } でベースの暗い背景を重ねています。この構成により、テキストが常にオーバーレイより手前に表示されます。
See the Pen Radial Expand by BaseKENT (@basekent) on CodePen.
調整方法
- 広がる速さ:
transition: mask-size 0.5s easeの秒数を変えると拡大速度が変わります - グラデーション色:
::beforeのbackground: linear-gradient(135deg, #6366f1, #a855f7)の色をブランドカラーに合わせてください - ベース色:
::afterのbackground: #1e293bをお好みのダークカラーに変更できます
Phantom（ファントム）
デフォルト状態で、ボタンのエッジが幻のように霞んで見えます。ホバーすると全体がシャープに「実体化」する演出で、他のどのエフェクトとも違う独特の存在感があります。mask-image: radial-gradient(ellipse 90% 80% at center, black 35%, rgba(0,0,0,0.6) 60%, transparent 80%) でボタン中央部は完全に表示し、エッジに向かって段階的に透明にしています。初期状態では mask-size: 100% 100%（マスクがボタンと同サイズ）なので中央のみ鮮明でエッジが霞み、ホバーで mask-size: 250% 250% に拡大するとマスクがボタン外に広がり全体が鮮明になります。
ダークバックグラウンドのランディングページや、サービスのキャッチコピーと並べるボタンに使うと、「出現感」が演出できます。ポップアップ系のUIのCTAにも向いています。
See the Pen Phantom by BaseKENT (@basekent) on CodePen.
調整方法
- 霞みの強さ:
rgba(0, 0, 0, 0.6)の不透明度を下げると中間部分のフェードが強くなり、より霞みがかった印象になります - ホバー後のサイズ:
mask-size: 250% 250%の数値を大きくするほど確実にシャープになります。200%でも十分ですが250%以上が安定します - エッジの広さ:
transparent 80%の数値を小さくすると透明ゾーンが中央に近づき、霞みが強くなります
Sweep Hover（スウィープ・ホバー）
ホバーすると、左端からグリーンのカラーが右へ向かって一気に塗りつぶされます。ワイプリビールの「ページロード版」をホバーインタラクションとして実装したデザインです。::before に mask-image: linear-gradient(90deg, black 50%, transparent 50%) と mask-size: 201% 100% を設定し、mask-position: 100% 0（オーバーレイ非表示）→ mask-position: 0% 0（オーバーレイ全表示）のトランジションでスウィープ効果を生み出しています。
ベースの暗いボタンと、ホバー後の鮮やかな緑のコントラストが大きいため、「押せる」という視覚的なフィードバックが強く出ます。申込みフォームの送信ボタンや、コンバージョンを意識したCTAに使うと存在感が増します。Radial Expand と同じ z-index の構成を使っているため、テキストは常にオーバーレイより手前に表示されます。
See the Pen Sweep Hover by BaseKENT (@basekent) on CodePen.
調整方法
- スウィープ速度:
transition: mask-position 0.45s easeの秒数を短くするとシャープな切り替えに、長くするとゆっくり塗られる演出になります - スウィープカラー:
::beforeのbackground: linear-gradient(90deg, #10b981, #059669)の色を変えると異なる印象になります。単色（background: #ef4444）でも動きます - ベースボーダー:
::afterのborder: 2px solid #334155の色を変えると、デフォルト状態の枠線色が変わります
Glitch Mask（グリッチ・マスク）
ボタンが3本の水平スライスに分割され、それぞれが独立してランダムに横方向へズレます。「信号が乱れた画面」のような、デジタルなグリッチ演出です。mask-image の複数レイヤー機能を使い、3つの linear-gradient(to bottom, black, black) を mask-size で縦方向に3分割（34%・33%・33%）し、@keyframes でそれぞれの mask-position を異なるピクセル量ずつずらしています。steps(1, end) を指定することで、滑らかではなくデジタルなジャンプとして動くのがポイントです。
ゲーム系・音楽系・テック系サイトのエンターテイメント要素として使うと一点のアクセントになります。常時ループしているため、ページ全体に多用するとうるさくなります。動きに敏感なユーザーへの配慮として @media (prefers-reduced-motion: reduce) でアニメーションをオフにする対応も検討してください。
See the Pen Glitch Mask by BaseKENT (@basekent) on CodePen.
調整方法
- グリッチの頻度:
animation: glitch-slices 3s steps(1, end) infiniteの秒数を短くするとより頻繁にグリッチが発生します。5s以上にすると一瞬だけ乱れる控えめな演出になります - ズレ幅:
@keyframes内の8px・-5px・10pxなどのpx値を大きくするとより激しいグリッチに、小さくすると繊細な乱れになります - スライス数:
mask-sizeとmask-positionのレイヤーを4つ以上に増やすと、より細かく分割されたグリッチになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
