Page Title

how to use toggles

so in typical html there is a check box

ILUS.css allows you to change that boring checkbox into an awsome toggle in just one step

for changing a regular checkbox to a toggle all you need to do is add a class of "toggle" to it


            <input type="checkbox" class="toggle">

mini toggle has a smaller tip that fits inside it , it can be made by adding a "mini" attribute to a toggle.


            <input type="checkbox" class="toggle" mini>

victory toggle has a green background it can be made by adding "victory" attribute to a toggle

alert toggle has a red background it can be made by adding "alert" attribute to a toggle

warn toggle has a gold background it can be made by adding "warn" attribute to a toggle

dark toggle has a black tip instead of white. it can be made by adding "dark" attribute to a toggle


            <input type="checkbox" class="toggle" dark mini alert>

flat toggle has no shadows it can be made by adding "flat" class to a toggle

customised toggles

multicolored toggle uses any color class to color the grey background of the toggle


            <input type="checkbox" class="toggle red" victory>

darkmode toggle also uses color classes to color the grey background.


            <input type="checkbox" class="toggle dark" dark warn>

so in typical html there is a range slider

ILUS.css allows you to change that boring range slider into an awsome slider in just one step

for changing a regular range slider to a ilus slider all you need to do is add a class of "slider" to it


            <input type="range" class="slider">

victory slider has a green progress it can be made by adding "victory" attribute to a slider

alert slider has a red progress it can be made by adding "alert" attribute to a slider

warn slider has a gold progress it can be made by adding "warn" attribute to a slider

dark slider has a black tip instead of white. it can be made by adding "dark" attribute to a slider


            <input type="range" class="slider" dark>

flat slider has no shadows it can be made by adding "flat" class to a slider