https://github.com/miladd3/clean-switch
Clean Switch - Material Inspired Pure CSS toggle switch
https://github.com/miladd3/clean-switch
css css-toggle-switch css3 ios-toggle material-design switch-ellement toggle-buttons toggle-switches
Last synced: about 1 month ago
JSON representation
Clean Switch - Material Inspired Pure CSS toggle switch
- Host: GitHub
- URL: https://github.com/miladd3/clean-switch
- Owner: miladd3
- License: mit
- Archived: true
- Created: 2018-01-12T03:35:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T16:05:15.000Z (over 2 years ago)
- Last Synced: 2024-08-03T00:12:24.187Z (11 months ago)
- Topics: css, css-toggle-switch, css3, ios-toggle, material-design, switch-ellement, toggle-buttons, toggle-switches
- Language: CSS
- Homepage: https://miladd3.github.io/clean-switch/
- Size: 597 KB
- Stars: 23
- Watchers: 2
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-CSS-Resources - clean-switch:
README
# clean-switch
Clean Switch - Material Inspired Pure CSS toggle switch
# About
**Clean switch** is just a lightweight pure css toggle switch. witch is simillar to Material Design lite switch(MDL) But in pure css and better syntax and no dependency
# How to use
First copy `clean-switch.css` in your project. then link it to your project HTML file
You can also use SCSS file `clean-switch.scss`
Make HTML switch structure like this. and put it inside forms or anywhere you like and it will behave like checkboxes.
this is label
# Diffrent Sizes
To adjust size of switch just add classes to the list of classes in switch ellement
this is large switch
size classes are:
* cl-switch-large
* cl-switch-xlarge
# Disabled
to make a switch disable simply add disabled attribute to checkbox
Disabled
# Diffrent Colors
To adjust color of the switch just add classes to the list of classes in switch ellement
this is red switch
color classes are:
* cl-switch-black
* cl-switch-red
* cl-switch-green
* cl-switch-orange
# Custom Colors
For Some projects you will need custom color so you can do it with small CSS
1- first you should add a class to class list of cl-switch in this example its `custom-class`
this is custom color switch
2- then you should adjust its color in your css **that is loaded after cl-switch css**
.custom-class input[type="checkbox"]:checked + .switcher {
background: #c06651; /*this is body of switch that should be lighter color*/
}
.custom-class input[type="checkbox"]:checked + .switcher:before {
background: #c0392b; /*this is btn of switch that should be darker color*/
}
# iOS Style
If you are an iOS fan, you can have iOS style too
just add `ios` class in label class list
all sizing and colors works fine
title
# licence and cast
MIT Licence
by [Milad Dehghan](https://dehghan.net)