ツヤツヤした光沢のボタンが、また目に入るようになりました。iOS初期の「水滴のようなボタン」から、2010年代のグロスUI全盛期まで、一度は「古くさい」と言われた光沢デザインが、Y2Kリバイバルやスキューモーフィズム再評価の文脈でじわじわ戻ってきています。ただの懐古趣味ではなく、現代的なミニマルデザインに光沢を一点加えると、独特の存在感が生まれます。
全5デモ、CSSの linear-gradient と ::before 擬似要素だけで作れます。JavaScriptは不要。定番グロス・液体のように流れる光・金属質感・Y2Kポップ・ダーク高級感と、5つの方向性に分けて選べる構成です。
Glass Shine（グラス・シャイン）
最もオーソドックスなグロスボタンです。::before 擬似要素でボタン上半分に半透明の白いグラデーションを乗せています。ガラス越しに光が差し込むような、古典的な光沢演出。シンプルですが、これだけでベタ塗りのボタンと比べると「質感の差」がはっきり出ます。コーポレートサイトのCTAや、SaaS系LPのボタンに取り入れると、見た目のリッチさが増します。
overflow: hidden でボタンの形に光沢をクリップしているのがポイントです。これがないと ::before がボタン外にはみ出します。
See the Pen Glass Shine by BaseKENT (@basekent) on CodePen.
調整方法
- 光沢の強さ:
rgba(255, 255, 255, 0.38)の不透明度を上げると光沢が強くなり、下げると自然な光彩になります - 光沢の高さ:
height: 55%を変えると光が当たる領域の広さが変わります - 背景色:
background: #3b82f6をお好みのブランドカラーに変えてください。暖色系にするとより光沢感が引き立ちます
Liquid Hover（リキッド・ホバー）
ホバーすると光の反射が位置を変えて流れるデザインです。background-size: 200% 200% でグラデーションを実際のボタンより広く作り、background-position を 0% 0% から 100% 100% にアニメーションすることで、光が斜め方向に動いている感覚を出しています。「液体の中で光が揺れる」ような柔らかい動きで、ホバーフィードバックとしても機能します。
アニメーションがホバー時だけなので、常時再生系のリングアニメーションと違って画面が賑やかになりすぎません。コーポレートサイトからブログまで、どのサイトにも使いやすい汎用型グロスです。
See the Pen Liquid Hover by BaseKENT (@basekent) on CodePen.
調整方法
- 光の移動速度:
transition: background-position 0.5s easeの秒数を変えると流れる速さが変わります - 光の強さ:
rgba(255, 255, 255, 0.35)の不透明度を変えると光彩の印象が変わります - 移動方向:
background-positionの100% 100%を100% 0%に変えると横方向のみの動きになります
Metallic（メタリック）
金属板のような質感を linear-gradient の多層重ねで表現したデザインです。明るいシルバー→中間グレー→暗いスチール→中間グレー→明るいシルバーという縦グラデーションが、研磨された金属の反射を模倣します。box-shadow の inset 指定でボタン上端に白い反射・下端に暗いエッジを加えているのも金属感の演出です。
テクノロジー系・工業系・ハードウェアブランドのサイトで使うとテーマにはまります。大文字テキストとの組み合わせが特に良く馴染みます。
See the Pen Metallic by BaseKENT (@basekent) on CodePen.
調整方法
- 金属の色味: グラデーション内の
#94a3b8（ブルーグレー系）を#a3a3a3（ニュートラルシルバー）や#b45309（ゴールド系）に変えると質感が変わります - テキスト色:
color: #1e293bを暗めにするとより金属プレートのような刻印感が出ます - 角丸:
border-radius: 4pxを0にするとシャープなインダストリアル感に、8pxにするとやや柔らかくなります
Candy Gloss（キャンディ・グロス）
高彩度のピンクに光沢を乗せた、ポップでY2K風のデザインです。::before の光沢を border-radius: 50px 50px 60% 60% で楕円形にすることで、「キャンディーの上部が光っている」ような形状を作っています。2020年代のかわいい系・ガーリー系・ポップブランドで見かける光沢スタイルです。
ホバーでわずかに拡大する動きを加えていて、押したくなる「触覚的なフィードバック」を視覚で補っています。
See the Pen Candy Gloss by BaseKENT (@basekent) on CodePen.
調整方法
- ベース色:
#ec4899（ピンク）を#8b5cf6（バイオレット）や#f97316（オレンジ）に変えるとトーンが変わります。彩度の高い色が光沢と相性が良いです - 光沢の形:
::beforeのborder-radius: 50px 50px 60% 60%を変えると光沢の形が変わります - ピルの丸さ:
border-radius: 50pxを8pxにするとオーソドックスな角丸ボタンになります
Dark Chrome（ダーク・クローム）
ダークグレーのグラデーションにシルバーハイライトを斜めに走らせた、高級感のあるクロームデザインです。ホバーすると ::before の光の筋がボタンを横切るように動き、金属面を光源が通過していくような演出になります。このようなスキャニングハイライトは、ダーク系の高級ブランド・プレミアムサービス・ゲーム系UIで使われるデザインパターンです。
pointer-events: none を ::before に指定することで、光の演出がボタンのクリックイベントを妨げないようにしています。
See the Pen Dark Chrome by BaseKENT (@basekent) on CodePen.
調整方法
- ハイライトの速度:
::beforeのtransition: left 0.5s easeの秒数を変えると光の通過速度が変わります。0.3sにするとシャープな光、0.8sにするとゆっくり流れる演出になります - ハイライトの幅:
::beforeのwidth: 60%を変えると光の筋の太さが変わります - ベースカラー: グラデーションの色をブルー系（
#1e3a5f→#0f172a→#1e3a5f）にするとダークブルーのクローム感になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
