+

Togglers






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.

Types

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.

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" />
    <label>
  9. Add <span class="switch"> inside <label>.
  10. <label class="tglr tglr-* tglr-#">
     <input type="checkbox" />
     <span class="switch"></span>
    <label>
  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>
    <label>
=>* means (a - z).

=># means (srnd & rnd).

Demo

Square Togglers





















































.
.
.
Semi-rounded Togglers





















































.
.
.
Rounded Togglers





















































.
.
.

Editing

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




HTML



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

Leave a Reply

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