css 光るエフェクト

CSSで輝くボタンアニメーションを実装する方法

ウェブサイトの魅力を高める上で、ユーザーの目を引くボタンデザインは重要です。CSSアニメーションを使うことで、シンプルながらも印象的な「輝き」をボタンに加えることができます。本記事では、初心者でも簡単に実装できる、5種類の輝くボタンアニメーションを紹介します。

1. グラデーションを使った輝き効果 (例: linear-gradient を使ったアニメーション)

linear-gradient関数を使って、輝くようなグラデーションを作成します。background-positionをアニメーションさせて、グラデーションを移動させることで輝きを表現します。色、速度、角度などを調整して、様々なバリエーションを作成可能です。


<style>
.button {
  background: linear-gradient(to right, #fff, #ddd, #fff);
  background-size: 200% auto;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  to {
    background-position: -200% 0;
  }
}
</style>
<button class="button">ボタン</button>

2. 擬似要素を使った輝き効果 (例: ::before, ::after を使ったアニメーション)

ボタンの前面に擬似要素を配置し、ぼかしや透明度をつけた輝きを作成します。擬似要素の位置や形状をアニメーションさせることで、動きのある輝きを表現します。複数の擬似要素を組み合わせることで、より複雑な輝きも表現可能です。


<style>
.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  transform: skewX(-45deg);
  animation: sparkle 1s linear infinite;
}

@keyframes sparkle {
  to {
    left: 100%;
  }
}
</style>
<button class="button">ボタン</button>

3. フィルターを使った輝き効果 (例: drop-shadow を使ったアニメーション)

drop-shadowフィルターを使って、ボタンに影のような輝きを追加します。影の色、ぼかし、位置をアニメーションさせることで、輝きを強調します。他のフィルターと組み合わせることで、より複雑な視覚効果も表現可能です。


<style>
.button {
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  to {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
}
</style>
<button class="button">ボタン</button>

4. SVGフィルターを使った輝き効果 (例: feGaussianBlur, feMerge を使ったアニメーション)

SVGフィルターを使って、より高度なぼかしや輝き効果を実現します。feGaussianBlurでぼかしを入れ、feMergeで元のボタンと合成することで、光沢感を表現します。フィルターのパラメータをアニメーションさせることで、動的な輝きを表現します。


<svg>
  <filter id="glow">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
    <feMerge>
      <feMergeNode in="blur" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

<style>
.button {
  filter: url(#glow);
}
</style>
<button class="button">ボタン</button>

5. JavaScriptと組み合わせた輝き効果

JavaScriptを使って、マウスホバーなどのイベントに合わせてアニメーションを制御します。よりインタラクティブで、ユーザーの行動に反応する輝き効果を実現します。CSSアニメーションと組み合わせることで、複雑な表現が可能になります。


<style>
.button:hover {
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  to {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
  }
}
</style>
<button class="button">ボタン</button>

まとめ

5つのCSSアニメーション技術を使って、様々な輝くボタン効果を実装できます。各技術にはそれぞれ特徴があり、組み合わせることでより豊かな表現が可能です。本記事を参考に、ウェブサイトに魅力的なボタンを実装してみましょう。

補足

各アニメーション効果のメリット、デメリットを比較した表を掲載

効果	メリット	デメリット
グラデーション	シンプルで実装しやすい	複雑な表現は難しい
擬似要素	自由度が高い	コードが複雑になりやすい
フィルター	手軽に実装できる	表現の幅が限られる
SVGフィルター	高度な表現が可能	実装が複雑
JavaScript	インタラクティブな表現が可能	パフォーマンスに影響が出やすい

CodePenなどのサイトで、実際のウェブサイトでの使用例を紹介
関連記事、参考資料へのリンクを掲載

CSSで輝くボタンアニメーションを実装する方法

1. グラデーションを使った輝き効果 (例: linear-gradient を使ったアニメーション)

2. 擬似要素を使った輝き効果 (例: ::before, ::after を使ったアニメーション)

3. フィルターを使った輝き効果 (例: drop-shadow を使ったアニメーション)

4. SVGフィルターを使った輝き効果 (例: feGaussianBlur, feMerge を使ったアニメーション)

5. JavaScriptと組み合わせた輝き効果

まとめ

補足

関連QA

Q1: ボタンアニメーションを実装する際の注意点は？

Q2: 上記以外にも、ボタンアニメーションを実装する方法はありますか？

Q3: ボタンアニメーションの効果的な使い方は？