I think that radio buttons, checkboxes, switches, etc. are often used in the input form, but i think the design tends to be monotonous.
So this time, I'll introduce an animated toggle that works with CSS, which is easy to use with Kopipe.
I often use the toggle by all means in the form etc.Please refer to that.
目次
- Click-to-light bulb-like toggle switch
- Animated toggle switch where a certain anime-style character wakes up or sleeps by clicking
- Elastic animation switch box that bounces when clicked (toggle)
- Animation switch box (toggle) that changes color radially with a click
- Simple switchbox (toggle) with CSS grid animation
- Three simple switch boxes (toggles)
- Switch box (toggle) that switches gender by click
- Toggle switch like electric switchbutton
- Toggle switch with red and green kawaii design that is easy to understand on and off
- Animated toggle switch that can be locked and unlocked by click
- Toggle button that can change the background color of ON freely
- The animation of the toggle covers roughly!ON-OFF animation switch 15 species
- Black and White Animation Toggle Button
- Animated toggle switch that spins buttons in toggle when clicked
Click-to-light bulb-like toggle switch
See the Pen
Pure CSS Bulb Switch by Grzegorz Witczak (@Wujek_Greg)
on CodePen.
Animated toggle switch where a certain anime-style character wakes up or sleeps by clicking
See the Pen
Totoro Toggle by Adam Kuhn (@cobra_winfrey)
on CodePen.
Elastic animation switch box that bounces when clicked (toggle)
See the Pen
✅ Springy Switchbox | Checkbox toggle animation | @keyframers 2.0.0 by @keyframers (@keyframers)
on CodePen.
Animation switch box (toggle) that changes color radially with a click
See the Pen
#028 – Toggle Radial Effect by Florin Pop (@FlorinPop17)
on CodePen.
Simple switchbox (toggle) with CSS grid animation
See the Pen
CSS grid toggle (animates in Firefox Nightly only) by Liam (@liamj)
on CodePen.
Three simple switch boxes (toggles)
See the Pen
Simple Knobby Toggles by Daryn St. Pierre (@bloqhead)
on CodePen.
Switch box (toggle) that switches gender by click
See the Pen
Gender Toggle Pure CSS by Chintu Yadav Sara (@chintuyadav)
on CodePen.
See the Pen
Checkbox Rocker Toggle Switch by Marcus Connor (@marcusconnor)
on CodePen.
Toggle switch with red and green kawaii design that is easy to understand on and off
See the Pen
Switch animation by Aaron Iker (@aaroniker)
on CodePen.
Animated toggle switch that can be locked and unlocked by click
See the Pen
Lock switch animation by Aaron Iker (@aaroniker)
on CodePen.
See the Pen
Subscribe Buttons (CSS) by Stockin (@Stockin)
on CodePen.
The animation of the toggle covers roughly!ON-OFF animation switch 15 species
See the Pen
Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh)
on CodePen.
Black and White Animation Toggle Button
See the Pen
Switchers (Checkboxes) by Zed Dash (@z-)
on CodePen.
See the Pen
Wobble Toggle by Adam Kuhn (@cobra_winfrey)
on CodePen.
