Toggle buttons is in the catagory of Web-UI control which is used to display ON (Checked) or OFF (Unchecked) states with a light indicator. PixelzUI provides twenty-nine classes for togglers. Classes start from .tglr-a to .tglr-z for toggle buttons' sizing. However, .btn-srnd & .btn-rnd are used for toggle buttons' styling.


Following are the three types of toggle buttons.

  1. Square
  2. Semi-rounded
  3. Rounded
=>Other types are based on toggle button size & color classes.


Following are the classes to use togglers in your scripts.
  1. .tglr
  2. .tglr-srnd
  3. .tglr-rnd
  4. .tglr-a
  5. .tglr-b
  6. .tglr-c
  7. .tglr-d
  8. .tglr-e
  9. .tglr-f
  10. .tglr-g
  11. .tglr-h
  12. .tglr-i
  13. .tglr-j
  14. .tglr-k
  15. .tglr-l
  16. .tglr-m
  17. .tglr-n
  18. .tglr-o
  19. .tglr-p
  20. .tglr-q
  21. .tglr-r
  22. .tglr-s
  23. .tglr-t
  24. .tglr-u
  25. .tglr-v
  26. .tglr-w
  27. .tglr-x
  28. .tglr-y
  29. .tglr-z
=>Other classes are based on color classes.

How to use

  1. Add .tglr as class attribute in <label>.
  2. <label class="tglr"><label>
  3. Add .tglr-* as an extra class attribute in <label> for toggler-sizing.
  4. <label class="tglr tglr-*"><label>
  5. Add .tglr-# as an extra class attribute in <label> for toggler-styling.
  6. <label class="tglr tglr-* tglr-#"><label>
  7. Add <input type="checkbox"> inside <label>.
  8. <label class="tglr tglr-* tglr-#">
     <input type="checkbox" />
  9. Add <span class="switch"> inside <label>.
  10. <label class="tglr tglr-* tglr-#">
     <input type="checkbox" />
     <span class="switch"></span>
  11. Add background color class as extra class with .switch.
  12. <label class="tglr tglr-* tglr-#">
     <input type="checkbox" />
     <span class="switch bg-lm"></span>
=>* means (a - z).

=># means (srnd & rnd).


Square Togglers

Semi-rounded Togglers

Rounded Togglers



You can make or modify toggle buttons of your own choice by using this editor.

  1. Select toggle button size from first range slider.
  2. Select button style from radio buttons.
  3. See the effect in dummy toggle button and HTML code.
  4. Copy that HTML code and place it in your script.

Toggle Button Size

Toggle Button Shape

Square Semi-rounded Rounded


<label class="tglr tglr-m tglr-rnd">
  <input type="checkbox">
  <span class="switch bg-sb"></span>

Leave a Reply

Your email address will not be published. Required fields are marked.