MoreToggles.css is a CSS library can help you create toggle switches using checkbox input and pure CSS with nice-looking.

Author: JNKKKK

How to use it:

1. Download and link Toggles.css library in the head section.

<!-- All In One -->
<link rel="stylesheet" href="moretoggles.min.css">
<!-- Or A Theme Of Your Choice -->
<link rel="stylesheet" href="moretoggles.android.min.css">
<link rel="stylesheet" href="moretoggles.check.min.css">
<link rel="stylesheet" href="moretoggles.emoji.min.css">
<link rel="stylesheet" href="moretoggles.heart.min.css">
<link rel="stylesheet" href="moretoggles.icon.min.css">
<link rel="stylesheet" href="moretoggles.io.min.css">
<link rel="stylesheet" href="moretoggles.ios.min.css">
<link rel="stylesheet" href="moretoggles.normal.min.css">
<link rel="stylesheet" href="moretoggles.square.min.css">
<link rel="stylesheet" href="moretoggles.square3d.min.css">
<link rel="stylesheet" href="moretoggles.star.min.css">
<link rel="stylesheet" href="moretoggles.transparent.min.css">
<link rel="stylesheet" href="moretoggles.yesno.min.css">
Or link with CDN 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css@0.2.1/output/moretoggles.min.css">

2. Create iOS-style switches.



<div class="mt-ios"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-ios-red"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-ios-blue"> 
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

3. Create Material Design style switches.



   
<div class="mt-android">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-android-indigo">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-android-violet">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-android-pink">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-android-orange">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

4. Create normal switches. 


<div class="mt-normal">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-normal-garden">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-normal-navi">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-normal-violet">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-normal-juice">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

5. Create transparent switches.

  
<div class="mt-transparent">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-transparent-navi">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-transparent-violet">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-transparent-blood">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-transparent-brown">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

6. With sweety check/uncheck buttons.


<div class="mt-check">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-check-garden">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class=" mt-check-matte">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-check-fruit">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-check-pink">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

7. Create flat square switches.

  
<div class="mt-square">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square-garden">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square-tomato">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square-matcha">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square-pink">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

8. Create 3D square switches.


<div class="mt-square3d">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square3d-garden">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square3d-tomato">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square3d-matcha">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-square3d-blush">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

9. Create emoji switches.

  
<div class="mt-emoji-mood">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-emoji-gender">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-emoji-pet">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-emoji-mute">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>
<div class="mt-emoji-like">
  <input id="1" type="checkbox" />
  <label for="1"></label>
</div>

10. Create star switches.




11. Create heart switches.

  
<div class="mt-heart">
  <input id="ujyldvzw.1.1" type="checkbox"> 
  <label for="ujyldvzw.1.1"></label> 
</div>
<div class="mt-heart-blush">
  <input id="ujyldvzw.2.1" type="checkbox">
  <label for="ujyldvzw.2.1"></label>
</div>
<div class="mt-heart-indigo">
  <input id="ujyldvzw.3.1" type="checkbox">
  <label for="ujyldvzw.3.1"></label>
</div>
<div class="mt-heart-pink">
  <input id="ujyldvzw.4.1" type="checkbox">
  <label for="ujyldvzw.4.1"></label>
</div>
<div class="mt-heart-golden">
  <input id="ujyldvzw.5.1" type="checkbox">
  <label for="ujyldvzw.5.1"></label>
</div>

12. Create icon switches.


<div class="mt-icon-music">
  <input id="ujyldvzw.1.1" type="checkbox"> 
  <label for="ujyldvzw.1.1"></label> 
</div>
<div class="mt-icon-ring">
  <input id="ujyldvzw.2.1" type="checkbox">
  <label for="ujyldvzw.2.1"></label>
</div>
<div class="mt-icon-mic">
  <input id="ujyldvzw.3.1" type="checkbox">
  <label for="ujyldvzw.3.1"></label>
</div>
<div class="mt-icon-cam">
  <input id="ujyldvzw.4.1" type="checkbox">
  <label for="ujyldvzw.4.1"></label>
</div>
<div class="mt-icon-pin">
  <input id="ujyldvzw.5.1" type="checkbox">
  <label for="ujyldvzw.5.1"></label>
</div>

13. Create YES/NO switches.


<div class="mt-yesno">
  <input id="ujyldvzw.1.1" type="checkbox"> 
  <label for="ujyldvzw.1.1"></label> 
</div>
<div class="mt-yesno-garden">
  <input id="ujyldvzw.2.1" type="checkbox">
  <label for="ujyldvzw.2.1"></label>
</div>
<div class="mt-yesno-matte">
  <input id="ujyldvzw.3.1" type="checkbox">
  <label for="ujyldvzw.3.1"></label>
</div>
<div class="mt-yesno-fruit">
  <input id="ujyldvzw.4.1" type="checkbox">
  <label for="ujyldvzw.4.1"></label>
</div>
<div class="mt-yesno-blush">
  <input id="ujyldvzw.5.1" type="checkbox">
  <label for="ujyldvzw.5.1"></label>
</div>

14. Create IO style switches.


<div class="mt-io">
  <input id="ujyldvzw.1.1" type="checkbox"> 
  <label for="ujyldvzw.1.1"></label> 
</div>
<div class="mt-io-yellow">
  <input id="ujyldvzw.2.1" type="checkbox">
  <label for="ujyldvzw.2.1"></label>
</div>
<div class="mt-io-garden">
  <input id="ujyldvzw.3.1" type="checkbox">
  <label for="ujyldvzw.3.1"></label>
</div>
<div class="mt-io-navi">
  <input id="ujyldvzw.4.1" type="checkbox">
  <label for="ujyldvzw.4.1"></label>
</div>
<div class="mt-io-violet">
  <input id="ujyldvzw.5.1" type="checkbox">
  <label for="ujyldvzw.5.1"></label>
</div>


Result:

See the Pen MoreToggles.css by Mengseng Oeng (@mengsengoeng) on CodePen.