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を御覧ください。
