見る角度で変わる、幻惑のボタン。CSSボタンデザイン「ホログラム」5選

2026年4月2日

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

CSSボタンデザインホログラムプリズム hue-rotate conic-gradient

虹色が動く。光が滲む。見るたびに色が違って見える。ホログラム箔やプリズムシートのような色彩変化を、CSSだけで再現するボタンデザインが2024〜2026年のトレンドとして注目を集めています。Y2K・サイバー系のデザインリバイバルとともに、クリエイティブ系・ゲーム系サイトを中心に採用事例が増え、「普通のカラーボタンと差をつけたい」ときの選択肢として実用的に使える段階まで来ました。

この記事では、hue-rotate / conic-gradient / mix-blend-mode を使ったホログラム・プリズム系ボタンを5種類紹介します。JavaScriptは使わず、HTMLは <a> タグ一行。コピペでそのまま動きます。WordPressやSWELLにも貼り付けられます。

Rainbow Shift（レインボー・シフト）

常時ループで色相が回転し続けるボタン。赤→橙→黄→シアン→紫→赤と、グラデーションの色相が360度をゆっくり一周します。静止状態でも常に動いているため、ページに1つ置くだけで視線を集める「磁石」になります。

filter: hue-rotate() を @keyframes で0degから360degまで回すシンプルな仕組みです。グラデーション自体は固定で、フィルターが色相だけをスライドさせる。ホバー時はアニメーション速度が3倍になり、色の流れが急加速するような演出に切り替わります。キービジュアル下のCTAボタン、ファッション系・音楽系サイトのアクションボタンに最適です。

See the Pen Rainbow Shift by BaseKENT (@basekent) on CodePen.

調整方法

回転速度: animation: rainbowShift 3s の秒数を変更します。6s にすると落ち着いた色の移ろいに、1.5s にするとより派手な印象になります
グラデーション色: linear-gradient(135deg, ...) の各色を変えると、レインボー以外のカラーパレットにも対応できます。2〜3色に絞るとよりシャープな印象になります
ホバー時のグロウ: box-shadow の rgba 値を変えることでグロウカラーをカスタマイズできます

Prism Hover（プリズム・ホバー）

通常時はくすんだ暗めの状態で静止し、ホバーした瞬間にフルカラーのプリズムが弾けるボタン。「押してみてはじめて輝く」というインタラクションの落差が、クリック率を上げる演出として機能します。

conic-gradient でボタン全体に7色の扇形を配置し、filter: saturate() で通常時は彩度を落としてくすませています。ホバーで彩度と明度を一気に上げることで「封印が解ける」ような色の爆発が起きます。外側に広がる box-shadow のグロウも同時に発動し、プリズムが光を放つ感覚を演出します。視覚的な「報酬」をホバーに仕込みたいページに向いています。

See the Pen Prism Hover by BaseKENT (@basekent) on CodePen.

調整方法

通常時の暗さ: filter: saturate(0.3) brightness(0.7) の数値を変えます。saturate(0) にすると完全なグレースケールからの爆発演出になります
conic-gradientの色: 7色すべてを変更可能です。2色や3色に絞ると、よりシャープなプリズム感になります
グロウの強さ: box-shadow の rgba の透明度を上げると発光が強くなります。0.8 程度まで上げると強いネオン感になります

Holographic Foil（ホログラフィック・フォイル）

ホログラム箔フィルムを貼ったような演出。暗い背景色のボタンの上に、半透明な虹色のグラデーション層を mix-blend-mode: overlay で重ねることで、「素材の色を透かしながら光の層が流れる」独特の質感を作り出します。

::before 疑似要素に background-size: 300% の広いグラデーションを配置し、@keyframes でゆっくり流れ続けます。重要なのは mix-blend-mode: overlay — これによって下のボタン色と虹色が混ざり合い、光の反射のような複雑な色彩が生まれます。pointer-events: none を忘れずに指定することで、疑似要素がクリックを邪魔しません。高級感のあるCTAボタン、ラグジュアリー系・アート系サイトに特によく合います。

See the Pen Holographic Foil by BaseKENT (@basekent) on CodePen.

調整方法

ベースカラー: a の background: #2a2a4a を変えるとホログラム箔の「下地色」が変わります。白系（#f0f0f0）にするとパール感のある明るいホログラムになります
箔の流れる速度: animation: foilShift 4s の秒数を変更します。遅くするほど上品で落ち着いた光の移ろいになります
箔の強さ: ::before 内の各色の rgba 透明度（0.25付近）を上げると箔感が強まります。上げすぎるとうるさくなるので 0.4 程度が上限の目安です

Iridescent Pulse（イリデセント・パルス）

玉虫色が脈打つように変化し続けるボタン。hue-rotate と saturate と brightness を3つ組み合わせたアニメーションで、単純な色相回転ではなく「光の生き物」のような有機的な色の変化を作り出します。

ベースグラデーションは #6e00ff（濃い紫）から #00d4ff（シアン）への2色で、そこに @keyframes で色相120度刻みの変化と彩度・明度の波を重ねています。Rainbow Shiftとの違いは「動き方の生き物感」。常に呼吸しているような緩急のある変化で、SF・ゲーム・テック系のUIに自然に溶け込みます。ホバーでアニメーション速度が2.5倍になり、グロウが広がります。

See the Pen Iridescent Pulse by BaseKENT (@basekent) on CodePen.

調整方法

ベースグラデーション: linear-gradient(135deg, #6e00ff, #00d4ff) の2色を変えると全体のトーンが変わります。ピンク〜オレンジ系（#ff006e, #ff8c00）にすると夕焼け玉虫感になります
パルスのリズム: animation: irisPulse 4s の秒数で波動の速さを制御します。2s にすると慌ただしく、8s にするとゆったりした呼吸感になります
hue-rotateのステップ: @keyframes 内の hue-rotate の値を 120deg 間隔から変えると色の変化パターンが変わります

Chrome Sheen（クローム・シーン）

シルバークロームの金属光沢を表現するボタン。ホバーするとシーン（光の筋）がスライドし、ほんのりカラーシフトが発生します。虹色や高彩度の演出とは逆方向の「抑制されたメタリック感」で、スタイリッシュなビジネス系・ガジェット系サイトのCTAとして使いやすい1本です。

linear-gradient で明度の高い白〜シルバーのグラデーションを組み、通常時は静止。ホバーで background-position が右にスライドすると同時に、filter: hue-rotate(30deg) でごくわずかな色みが乗ります。animation: sheenSlide がホバー中に一度だけ走り、光の筋がボタンを横切る演出を作ります。文字色は暗色（#222）にすることで、明るい金属面の上でのコントラストを確保しています。

See the Pen Chrome Sheen by BaseKENT (@basekent) on CodePen.

調整方法

金属色のトーン: linear-gradient の #8a8a8a / #f8f8f8 / #ffffff を全体的に黄みよりの値（#a09060 / #f8e880）に変えるとゴールドクロームになります
ホバー時の色み: filter: hue-rotate(30deg) の角度を変えます。60deg にすると緑がかった軍用メタル感、200deg にするとブルーチタン感になります
光の筋の速度: animation: sheenSlide 0.8s の秒数を変えます。0.4s にすると素早くフラッシュする演出になります