CSSで使えるON/OFF切り替えボタン【シンプル系デザイン】をまとめてみました！
codepenから引用しています
おしゃれすぎるON・OFF切り替えボタン！ プロデザイン・アニメーションをコピペで実装
シンプルなものからかっこいいもののON/OFF切り替えボタンを集めてみました！
一見ON/OFF切り替えボタンのように見えないようなもののあるので
ぜひサイトにあったものを使ってみてください！
鮮やかフラットデザイン
二種類から選べるシンプルなボタン！
See the Pen
Bootstrap Button Toggle (On/Off Switch) by Aanjulena Sweet (@aanjulena)
on CodePen.
どれも楽しいおもちゃ箱
ちょっと変わったおもしろ可愛いボタン集
See the Pen
A bunch of funky CSS3 Toggle Buttons by Ashley Nolan (@ashleynolan)
on CodePen.
どんな変化を選ぶ？
切り替わり方いろいろ！好きな切り替わり方を選ぼう！
See the Pen
Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh)
on CodePen.
王道WEBスイッチ
切り替わりと同時に横に文字が現れる！シンプルでおしゃれなデザイン
See the Pen
Button Switch by Margarida Aleixo (@margarida)
on CodePen.
種類別ボタンスイッチ
ちょっとしたこだわりをつけたい方へいろいろな切り替わり方があるデザイン集！
See the Pen
Pure CSS toggle buttons by Mauricio Allende (@mallendeo)
on CodePen.
イラストな世界
視覚的にも分かりやすい王道デザイン！
See the Pen
Jquery Toggle Button by Nikhil Krishnan (@nikhil8krishnan)
on CodePen.
モノクロ調デザイン
スイッチ型のON/OFF切り替えボタン！モノクロデザインでかっこよく！
See the Pen
Switch Button by Nicolas Lanthemann (@vanderlanth)
on CodePen.
選べない…笑
一風変わった変わり方もある切り替わり方デザイン集
See the Pen
Toggle Buttons by Vineeth.TR (@vineethtr)
on CodePen.
おしゃれ系デザイン
Yes/No型で真ん中の記号の切り替わり方もおしゃれ
See the Pen
Awesome Toggle Button by Andrew (@theawesomecoder61)
on CodePen.
ゆっくり
両方が〇なちょっと変わったデザイン
See the Pen
Switch Button by Hugo (@kapz)
on CodePen.
シンプルおしゃれ
スイッチと同時に色が変わる！シンプルなデザイン
See the Pen
cool switch button by Valentin Galmand (@valentingalmand)
on CodePen.
グラデーションアニメーション
ボタンの部分がパステルカラーのグラデーションになっていて可愛い！
See the Pen
Colorful Switch (CSS Only) by Nikolay Talanov (@suez)
on CodePen.
まとめ おしゃれポップなデザイン
何度もクリックしたくなるものばかりでしたね、、
ちょっとかわいらしいシンプルデザインが好きな方にはこちら！
検索のトップ表示にできます！
Googleの新機能を堪能しませんか？
いままでの様に、求人広告やリスティング広告に多額の費用を支払う時代はもう終わりました
2019年から始まった新しいサービス「Googleしごと検索」を活用することで、誰でも簡単にGoogleの巨大プラットフームを利用できるようになったのです！
『すべて無料』で始められます！
