丸いスイッチボタンのCSSアニメーション 8選
つい押したくなるような丸いボタンとは？
ゲームやアプリの中ではよく見るスイッチボタンですが、WEBでも作ることができます。
一般的なLPなどでは見かけることは少ないですが、表示を切り替えるときにとっても便利です。
またお問い合わせフォームで「はい・いいえ」などの2択から選ぶような設問にも使われることがよくあります。
ただのボタンに比べて、inputとlabelタグを使って切り替えるためコードが少し複雑になります。
ここではスタンダードなスイッチボタンにアニメーションで楽しい動きを加えたものをご紹介していきたいと思います。
右と左バージョンを用意しましたので、お好きな方を使っていただけます。
それでは一緒に見ていきましょう。
よく読まれている記事
スタンダードな切り替えスイッチボタン
角丸ボタンの中の白丸を押すと切り替わるアニメーションです。
これは1番よく見るタイプのデザインで、背景色が変わるようになっています。
ON/OFFのスイッチにも使えるのでとても使いやすいと思います。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
バーの上を移動するスイッチボタン
横長のバーの上を白丸がスライドして切り替わるアニメーションです。
これはとてもスマートなデザインで、場所を取りたくない時におすすめのデザインです。
ボリュームのつまみのような見た目は押してみたくなりそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
埋め込んだようなスイッチボタン
壁に埋め込んだようなボタンがリアルに切り替わるようなアニメーションです。
これは奥行きのあるデザインで、よりリアルなスイッチボタンのデザインになっています。
ボタンをグラデーションにしてもさらに立体的に表現できそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
切り替えで形が変化するスイッチボタン
中の白丸ボタンの形が大きく変化するようなアニメーションです。
ease-outとease-inを使って形が変化する時間に差をつけて実装するとこのような動きになります。
ボタンの色と大きさが大きく変化するので、とても分かりやすいデザインでおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
切り替えで色が変化するスイッチボタン
ボタン全体の色が大きく変化するようなアニメーションです。
これはWEBデザインに合うようなデザインで、余計な動きが少なく人気のデザインです。
スタイリッシュなデザインでも邪魔せず使えて便利です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ボタンの大きさが変化するスイッチボタン
ボタンを押すと中の丸ボタンが外枠いっぱいに大きくなるようなアニメーションです。
あまり見かけないスイッチボタンですが、切り替えたことがよくわかるようなデザインです。
中にテキストを追加してもいろいろと使えそうな実装ですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ボタンが上下に移動するスイッチボタン
中のボタンが上に消えたり出てきたりするようなアニメーションです。
切り替えると上からポヨンと出てくる動きがとっても可愛いデザインです。
遊びや動きを加えたい時にぴったりの実装ですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
縁のあるフラットなスイッチボタン
平面的でふちのある少し昔のデザインのようなアニメーションです。
最近のデザインではこのようなはっきりと縁をつけることがないので、逆に新鮮ですね。
アニメや漫画風のサイトにおすすめのボタンです。
See the Pen
スイッチアニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
スイッチボタンは少し難しいかもしれませんが、実装するととても面白いですね。
ついつい押してしまいたくなるし、アニメーションがついていると何回も押してしましますw
inputやlabelタグは使う頻度も少ないので、スイッチの実装で慣れておくといつでも使うことができるようになります。
スイッチがサイト内にあるだけで、凝っているようなデザインになるのでおすすめです♪
何回も押してしまいたくなるようなスイッチボタンをたくさん作っていきましょう。
最後までご覧いただきありがとうございました☆彡