ON・OFFボタン

CSSでできるON・OFF切り替え型ボタン!【おしゃれデザイン系】




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.

まとめ おしゃれポップなデザイン

何度もクリックしたくなるものばかりでしたね、、

ちょっとかわいらしいシンプルデザインが好きな方にはこちら!

押したらメニューが出てくる黄色いプラスボタン
おしゃれすぎるCSSで出来るプラスボタン! 【 ポップアップアニメーションあり・なし 】CSSで使えるおしゃれなプラスボタンをまとめてみました! codepenから引用しています プラスボタン【 ポップアップあり 】...
かっこいいCSS検索BOXがコピペで実装できる!【虫眼鏡クリック型】CSSで使えるかっこいい検索Box【アイコンタップ型】をまとめてみました! codepenから引用しています かっこいいCSS検...
Googleしごと検索を使えば、『無料で』求人を
検索のトップ表示にできます!

Googleの新機能を堪能しませんか?

覗いてみる!

いままでの様に、求人広告やリスティング広告に多額の費用を支払う時代はもう終わりました

2019年から始まった新しいサービス「Googleしごと検索」を活用することで、誰でも簡単にGoogleの巨大プラットフームを利用できるようになったのです!

『すべて無料』で始められます!