私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

ウェブサイトのデザインのための35のトグルボタン

ウェブサイトのデザインのための35のトグルボタン


December, 28 2021

今日の投稿では、基本的なトグルスイッチボタンを作成し、ライブラリを使用してこれらのボタンをWebサイトで見栄えよくする方法を学習します。

トグルスイッチボタン

純粋なCSSトグルスイッチ

Pure CSS Toggle Switch

以下の結果を見ることができます。

See the Pen Pure Css "day and night" toggle by Benjamin Réthoré (@bnthor) on CodePen.

リンク

トグルボタンHTMLCSS

Toggle Button HTML CSS

以下の結果を見ることができます。

See the Pen A Confusing Toggle Button by Himalaya Singh (@himalayasingh) on CodePen.

リンク

シンプルなCSSスイッチボタン

Simple CSS Switch Button

以下の結果を見ることができます。

See the Pen Simple CSS Switch / Toggle by Aaron Iker (@aaroniker) on CodePen.

リンク

スタイリッシュなトグルボタン

Stylish Toggle Button

以下の結果を見ることができます。

See the Pen Simple CSS Switch / Toggle by Aaron Iker (@aaroniker) on CodePen.

リンク

スイッチボタンアニメーション

以下の結果を見ることができます。

See the Pen ✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0 by @keyframers (@keyframers) on CodePen.

リンク

CSSトグルボタンの概要

CSSトグルボタンの概要

以下の結果を見ることができます。

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

リンク

CSS3トグルボタン

CSS3 Toggle Button

以下の結果を見ることができます。

See the Pen Checkboxes and Visual Affordance Indicators by Adam Clark (@adamstuartclark) on CodePen.

リンク

CSS3トグルボタンとテキスト

CSS3トグルボタンとテキスト

以下の結果を見ることができます。

See the Pen I/O Codepen by Paraskevas Dinakis (@perry_nt) on CodePen.

リンク

純粋なCSS最小トグル

Pure CSS Minimal Toggle

以下の結果を見ることができます。

See the Pen Pure CSS Minimal Toggle by Rau (@raubaca) on CodePen.

リンク

スイッチボタンJquery

Switch Button Jquery

以下の結果を見ることができます。

See the Pen On/off toggle switch by Anastasia Goodwin (@agoodwin) on CodePen.

リンク

HTMLスイッチボタン

HTML Switch Button

以下の結果を見ることができます。

See the Pen Custom Toggle Switch Inspiration (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.

リンク

ボタンスイッチCSS3

Button Switch CSS3

以下の結果を見ることができます。

See the Pen switch by Stef Geraets (@stefgeraets) on CodePen.

リンク

ボタンオンオフトグルCSS3

Button On-Off Toggle CSS3

以下の結果を見ることができます。

See the Pen Day to Night Toggle Switch by Aybüke Ceylan (@aybukeceylan) on CodePen.

リンク

スイッチボタンCSS3を切り替えます

Toggle Switch Button CSS3

以下の結果を見ることができます。

See the Pen CSS Switch by Randy Lebeau (@cl0udc0ntr0l) on CodePen.

リンク

カスタムチェックボックス-切り替えボタン

Custom Checkbox-Toggle Switch Button

以下の結果を見ることができます。

See the Pen Custom Checkbox / Toggle Switch by thelaazyguy (@thelaazyguy) on CodePen.

リンク

純粋なCSSトグルボタン

Custom Checkbox-Toggle Switch Button

以下の結果を見ることができます。

See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen.

リンク

スターウォーズトグルアイコンアニメーション

Star Wars Toggle Icon Animation

以下の結果を見ることができます。

See the Pen Star Wars Toggle Icon Animation by Rıza Selçuk Saydam (@rss) on CodePen.

リンク

Jqueryトグルボタン

Jquery Toggle Button

以下の結果を見ることができます。

See the Pen Jquery Toggle Button by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

リンク

トグルボタンアニメーション

Toggle Button Animation

以下の結果を見ることができます。

See the Pen Toggle Button Animation by Aaron Iker (@aaroniker) on CodePen.

リンク

CSSスイッチ

CSS Switch

以下の結果を見ることができます。

See the Pen CSS Switch by seth.schwiet (@schwiet) on CodePen.

リンク

トグルボタンオンオフスイッチ

Toggle buttons  On-Off switches

以下の結果を見ることができます。

See the Pen Toggle buttons / On-Off switches by Himalaya Singh (@himalayasingh) on CodePen.

リンク

Reactトグルスイッチボタン

React  Toggle Switch Button

以下の結果を見ることができます。

See the Pen React DailyUI - 015 - On/Off Toggle Switch by Jack Oliver (@studiojvla) on CodePen.

リンク

CSSの切り替えを切り替える

Toggle switch CSS

以下の結果を見ることができます。

See the Pen Toggles by Olivia Ng (@oliviale) on CodePen.

リンク

HTMLの切り替えを切り替える

Toggle Switch HTML

以下の結果を見ることができます。

See the Pen All-CSS Toggle Switch (Checkbox Hack) by Marcus Burnette (@mburnette) on CodePen.

リンク

スタイルチェックボックスを切り替える

Toggle Style Checkbox

以下の結果を見ることができます。

See the Pen Accessible toggle-style checkbox by Chris Hart (@personable) on CodePen.

リンク

HTMLトグルチェックボックス

HTML Toggle Checkbox

以下の結果を見ることができます。

See the Pen Toggle Buttons by Vineeth.TR (@vineethtrv) on CodePen.

リンク

シンプルなトグルボタンhtml

Simple toggle button html

以下の結果を見ることができます。

See the Pen Simple Toggle by magnificode (@magnificode) on CodePen.

リンク

3Dトグルボタン

3D Toggle Button

以下の結果を見ることができます。

See the Pen 3D toggle - click it! by Ana Tudor (@thebabydino) on CodePen.

リンク

バブルトグル

Bubble Toggle

以下の結果を見ることができます。

See the Pen Bubble Toggle by Chris Gannon (@chrisgannon) on CodePen.

リンク

iOSに触発されたチェックボックス

iOS-inspired checkbox

以下の結果を見ることができます。

See the Pen iOS-inspired checkbox | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.

リンク

純粋なCSS電球スイッチ

Pure CSS Bulb Switch

以下の結果を見ることができます。

See the Pen Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg) on CodePen.

リンク

トグルボタンCSSのみ

Toggle Button CSS Only

以下の結果を見ることができます。

See the Pen 3D Orange Switch (Pure CSS) by Yoav Kadosh (@ykadosh) on CodePen.

リンク

3Dスイッチアニメーション

3D Switch animation

以下の結果を見ることができます。

See the Pen 3D Switch animation by Aaron Iker (@aaroniker) on CodePen.

リンク

タブがアニメーションを切り替える

Tabs switch animations

以下の結果を見ることができます。

See the Pen Tabs switch animations by Shayan (@shayanea) on CodePen.

リンク

カラフルなスイッチボタン

Colorful Switch Button

以下の結果を見ることができます。

See the Pen Colorful Switch (CSS Only) by Nikolay Talanov (@suez) on CodePen.

リンク

結論

これが、開発とWebに役立つトグルスイッチをよりよく理解するのに役立つことを願っています。 ご不明な点がございましたら、メールにてお問い合わせください。