CSS 色が変わるボタンの作り方

CSSのanimationを使用して光るボタンの作り方を紹介します。

完成品

See the Pen
gron button
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
gron button
by kura (@kuranopen)
on CodePen.

HTMLに大きなポイントはありませんが、クラス名btnに光るCSSを後述します。

CSS

See the Pen
gron button
by kura (@kuranopen)
on CodePen.


@keyframes grow {
0% {
background-color: #00F;
}
100% {
background-color: #0FF;
}
}

アニメーションの時系列での色の変わり方を設定しています。

animation: grow 1s ease 0s infinite alternate;がアニメーションの詳細設定です。

  • grow 定義しているアニメーション名を指定。
  • 1s アニメーション開始から終了までにかかる時間を指定。
  • ease アニメーションの動き方を指定。
  • 0s アニメーションが動くまでの時間を指定。
  • infinite アニメーション回数を指定します。

詳しい指定方法はMDNのCSSリファレンス animationを御覧ください。

スポンサーリンク

スポンサーリンク

  • このエントリーをはてなブックマークに追加

【続き】 CSSテクニックの便利な使い方

新しい記事はありません