Nirajan Basnet

Nice Looking CSS Toggles

Nice Looking CSS Toggles
3 min read

When we need a switch toggles designs to implement, there is always a challenge for me to find a perfect CSS Toggles. We can find lots of awesome frameworks to work with but they are just heavy in size to use.

I found this little pure CSS library MoreToggles.css which has a variety of nice-looking toggles.

You only have to add a new ClassName to the wrapper div and this library will do the magic for you.

Features

  • Pure CSS
  • 8 different styles
  • Perfect scaling

More styles are coming soon!!

Pure CSS Toggles

Let’s jump it out its usage

Import the stylesheet

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>

Wrap an extra div around your <input> and <label>. Add a mt-* class to it.

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

Varities of styles

Pure CSS Toggles

You can scale the toggles by assigning a font-size attribute style="font-size:10px;" to the wrapper div. You can try different numbers and the toggle will scale smoothly.

<div class="mt-ios" style="font-size:10px;">
  <input id="3" type="checkbox" />
  <label for="3"></label>
</div>

Disabled Toggles

Just like regular checkbox, you can add disabled attribute to <input> tag.

<div class="mt-ios">
  <input id="4" type="checkbox" disabled/>
  <label for="4"></label>
</div>

Notice

Be careful on nesting the <input> directly inside the <label> is NOT supported, although it is valid HTML syntax

Don’t ☚ī¸

<div class="mt-ios"> 
  <label>
    <input type="checkbox" />
  </label>
</div>

Do 😃

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

Thanks to Enkai Ji, for creating this little pure css toggles. You can download this library from here.

Conclusion

By coming this far I hope you can use these pure CSS toggles to style awesome toggle switches. So I suggest you give it a try on your project and enjoy it!

Till then,
Keep on Hacking, Cheers