Create A Variety Of Switches With Checkbox And CSS – MoreToggles.css

Preview:

Description:

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

How to use it:

1. Download and load the MoreToggles.css library in the head section of the document and we’re ready to go.

<!-- 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">

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.

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

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>

Changelog:

v1.0.0 (03/01/2023)

• Update

v0.4.0 (01/06/2022)

• Update

v0.2.1 (04/05/2020)

• Add one more style & Build separate css files for each style

03/09/2020

• fix -webkit-clip-path