ボタンに光の筋が一瞬横切る——たったそれだけの演出が、ページの印象をぐっと引き上げます。シマー（shimmer）とは、宝石やガラスに当たった光がすっと流れるような輝きのこと。その動きをCSSのみで実装したのが「シマーボタン」です。ショッピングサイトの購入ボタン、ランディングページのCTA、ポートフォリオの問い合わせリンク——光の演出は「ここが押しどころ」と視覚的に伝える、上品かつ効果的な手法です。
この記事では、シマー系のCSSボタンを5パターン紹介します。すべてCSSのみで実装しており、JavaScriptは不要。コードをそのままCodePenで確認し、WordPressやSWELLにもコピペで使えます。ホバー連動・自動ループ・パルス拡散など、演出の種類もバリエーションを持たせました。用途に合ったデザインを見つけてみてください。
Classic Sweep（クラシック・スイープ）
シマーボタンの基本形。ホバーすると、斜めに傾いた半透明の白い光がすっと左から右へ横断します。::after 擬似要素に skewX(-25deg) で傾きをつけ、left プロパティを -75% から 150% へ transition で動かすだけのシンプルな仕組みです。余計な装飾を足さず、光の一閃だけに集中した設計が、どんな背景色にも自然になじみます。
赤を使ったソリッドボタンとの相性が特によく、「申し込む」「今すぐ購入」など、決断を促すアクションボタンとして使いやすい一本です。シマーの幅（width: 50%）を細くするとよりシャープに、広げるとやわらかな光の面になります。ホバー時だけ光るため、インタラクティブな反応を自然に演出できます。
See the Pen Classic Sweep by BaseKENT (@basekent) on CodePen.
調整方法
- 背景色:
.btnのbackground: #e74c3cを任意の色に変更してください。光のグラデーションは白固定なので、どの色でも機能します - 光の速度:
transition: left 0.6s easeの数値を小さくすると速く、大きくするとゆっくりした流れになります - 光の幅:
::afterのwidth: 50%を30%にするとシャープな筋に、70%にすると広い面になります
Auto Shine（オート・シャイン）
ホバーを待たずに、ボタン自身がひとりでに光り続けます。@keyframes shine で光を左から右へ動かし、animation: shine 2.5s ease infinite で無限ループさせた設計です。グラデーション背景（紫系）との組み合わせで、宝石のような輝きを演出しています。
このタイプが適しているのは、ページ内で「絶対に見落としてほしくない」要素です。スクロールしてきた瞬間に光が走っていれば、ユーザーの目は自然とそこへ向かいます。キャンペーンサイトのメインCTAや、会員登録ボタンのように「能動的に気づかせたい」場面に最適。border-radius: 50px のピル型との相性も抜群です。
See the Pen Auto Shine by BaseKENT (@basekent) on CodePen.
調整方法
- アニメーション速度:
animation: shine 2.5s ease infiniteの2.5sを小さくすると光の周期が短くなり、大きくするとゆっくり流れます - 背景グラデーション:
background: linear-gradient(135deg, #667eea, #764ba2)の色をブランドカラーに合わせて変更できます - 光の強度:
::afterのrgba(255, 255, 255, 0.5)の数値（0.0〜1.0）で輝きの強弱を調整してください
Glow Pulse（グロウ・パルス）
光がボタンの中央から生まれ、外に向かってじわっと広がり、消える。「パルス」と名付けたのはその波動的な広がりのためで、古いUIに見られるリップル効果を光だけで表現したデザインです。radial-gradient で円形の光の塊を作り、scale(0) から scale(3) へのアニメーションで膨張させています。opacity: 0 で消えることで、ループせず1回のホバーごとに発動する自然な演出になっています。
青のフラットボタン（border-radius: 6px）との組み合わせは、ビジネス系サービスのUIに違和感なく溶け込みます。フォーム送信ボタン、アカウント登録ボタン、「プランを選ぶ」ボタンなど、ユーザーに「決めた」という感触を与えたい場面に向いています。光の消え方が forwards で止まらず opacity: 0 に収束するため、エンドレスに流れ続けず品のある余韻を残します。
See the Pen Glow Pulse by BaseKENT (@basekent) on CodePen.
調整方法
- 背景色:
.btnのbackground: #2d6cdfを任意の色に変更できます。光のグラデーションは白半透明なので、明度の高いベースカラーほど光が際立ちます - パルスの広がり速度:
animation: glow-pulse 0.6s ease-out forwardsの0.6sを大きくすると膨張がゆっくりになります - 光の初期サイズ:
::afterのwidth: 40%を大きくするとパルスの出発点が広くなり、迫力が増します
Double Ray（ダブル・レイ）
光が1本ではなく、2本。しかも時間差で走ります。::before で太いレイが先を走り、::after で細いレイが animation-delay: 0.18s 遅れて追いかける、わずかなラグの演出です。2本の光の速度差と幅の差（30% と 18%）が重なって、単なる光の横断にならない「走る感覚」が生まれます。
ゴールドのボタン（background: #c9a227）との組み合わせが、このデザインの真骨頂です。高級感・プレミアム感を求めるシーン——ラグジュアリーブランドのサイト、限定品のランディングページ、会員限定コンテンツへの誘導——に自然に機能します。letter-spacing と text-shadow を加えたテキストスタイルも、ゴールドのトーンに合わせて設計しています。
See the Pen Double Ray by BaseKENT (@basekent) on CodePen.
調整方法
- レイの遅延:
.btn:hover::afterのanimation: ray2 0.7s ease 0.18s forwardsの0.18sを変えると2本目が追いかける間隔が変わります。0.3sにすると差がより大きくなります - ゴールドの色味:
background: #c9a227を#b8860b（ダークゴールド）や#ffd700（ブライトゴールド）に変えてトーンを調整できます - レイの太さ:
::beforeのwidth: 30%と::afterのwidth: 18%の差を縮めると2本の違いが小さく、広げるとコントラストが強まります
Metal Sheen（メタル・シーン）
JavaScriptもアニメーションも使わず、background-position の変化だけで光沢が流れるメタリックボタン。background-size: 300% 100% で横に引き伸ばしたグラデーションを用意し、ホバー時に background-position を右端から左端へシフトさせます。結果として、暗いシルバーの中を明るいハイライトが静かに動く、金属が光を受けたときのような質感が生まれます。
疑似要素を一切使わない点が、このデザインの特徴です。HTMLもCSSもシンプルで、既存のスタイルとの干渉が起きにくい。アクションの重さに対してアニメーションを抑えたい場面——フォームの確定ボタン、管理画面のUIパーツ、デザインツール系のCTA——で品よく機能します。背景が暗いページ（#2c2c2c）に置いたとき、マットな存在感がより際立ちます。
See the Pen Metal Sheen by BaseKENT (@basekent) on CodePen.
調整方法
- メタルの色:
background: linear-gradient(105deg, #4a4a4a 0%, #7a7a7a 20%, #c0c0c0 40%, ...)の各カラーストップを変更することで、ゴールドメタルやブロンズメタルに変えられます。ハイライト部分（40%付近）を#ffe97fにするとゴールド系になります - 光の流れる速度:
transition: background-position 0.7s easeの数値を小さくするとシャープに切り替わり、大きくするとゆっくり流れます - グラデーションの幅:
background-size: 300% 100%の300%を大きくするほど光の移動距離が長くなり、流れる感覚が強まります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
