How to add the text ON and OFF to toggle button

Question

On my project I wanted to add a text on my existing toggle code So I wanted like this  When toggles ON it should display the text  ON  and display the  OFF  text if toggles off  I can t change it to other toggle because it s already have a backend using it  I just wanted only to input  ON  and  OFF  text  Thank you   Here is my code  HTML     lt label class  switch  gt  lt input type  checkbox  id  togBtn  gt  lt div class  slider round  gt  lt  span gt  lt  div gt  lt  label gt    CSS    switch input  display none     slider     position  absolute    cursor  pointer    top  0    left  0    right  0    bottom  0    background-color   ca2222    -webkit-transition   4s    transition   4s      slider before     position  absolute    content        height  26px    width  26px    left  4px    bottom  4px    background-color  white    -webkit-transition   4s    transition   4s     input checked    slider     background-color   2ab934     input focus    slider     box-shadow  0 0 1px  2196F3     input checked    slider before     -webkit-transform  translateX 26px     -ms-transform  translateX 26px     transform  translateX 26px         Rounded sliders     slider round     border-radius  34px      slider round before     border-radius  50

User · Answer

try this    x000D   x000D   switch   x000D    position  relative  x000D    display  inline-block  x000D    width  60px  x000D    height  34px  x000D    x000D   x000D   switch input  display none   x000D   x000D   slider   x000D    position  absolute  x000D    cursor  pointer  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D    background-color   ccc  x000D    -webkit-transition   4s  x000D    transition   4s  x000D    x000D   x000D   slider before   x000D    position  absolute  x000D    content      x000D    height  26px  x000D    width  26px  x000D    left  4px  x000D    bottom  4px  x000D    background-color  white  x000D    -webkit-transition   4s  x000D    transition   4s  x000D    x000D   x000D  input checked    slider   x000D    background-color   2196F3  x000D    x000D   x000D  input focus    slider   x000D    box-shadow  0 0 1px  2196F3  x000D    x000D   x000D  input checked    slider before   x000D    -webkit-transform  translateX 26px   x000D    -ms-transform  translateX 26px   x000D    transform  translateX 26px   x000D    x000D   x000D     Rounded sliders    x000D   slider round   x000D    border-radius  34px  x000D    x000D   x000D   slider round before   x000D    border-radius  50   x000D    x000D   lt  doctype html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta charset  utf-8  gt  x000D   lt title gt Untitled Document lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D   lt h2 gt Toggle Switch lt  h2 gt  x000D   x000D   lt label class  switch  gt  x000D     lt input type  checkbox  gt  x000D     lt div class  slider  gt  lt  div gt  x000D   lt  label gt  x000D   x000D   lt label class  switch  gt  x000D     lt input type  checkbox  checked gt  x000D     lt div class  slider  gt  lt  div gt  x000D   lt  label gt  lt br gt  lt br gt  x000D   x000D   lt label class  switch  gt  x000D     lt input type  checkbox  gt  x000D     lt div class  slider round  gt  lt  div gt  x000D   lt  label gt  x000D   x000D   lt label class  switch  gt  x000D     lt input type  checkbox  checked gt  x000D     lt div class  slider round  gt  lt  div gt  x000D   lt  label gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Here I made a toggle button with CSS   switch     position  relative    display  inline-block    width  100     height  34px      switch input  display none     slider     position  absolute    cursor  pointer    top  0    left  0    right  0    bottom  0    background-color   ca2222    -webkit-transition   4s    transition   4s      slider before     position  absolute    content   quot  quot     height  26px    width  26px    left  4px    bottom  4px    background-color  white    -webkit-transition   4s    transition   4s     input checked    slider     background-color   2ab934     input focus    slider     box-shadow  0 0 1px  2196F3     input checked    slider before     -webkit-transform  translateX 165px     -ms-transform  translateX 165px     transform  translateX 200px        ------ ADDED CSS ---------    on     display  none      on   off     color  white    position  absolute    transform  translate -50  -50      top  50     left  50     font-size  10px    font-family  Verdana  sans-serif     input checked   slider  on  display  block    input checked    slider  off  display  none      --------- END --------       Rounded sliders     slider round     border-radius  34px      slider round before     border-radius  50     Here is the HTML code of toggle button with text                                                     lt input type  quot checkbox quot  id  quot togBtn quot  gt   lt div class  quot slider round quot  gt       lt  --ADDED HTML -- gt       lt span class  quot on quot  gt BOOKED lt  span gt       lt span class  quot off quot  gt AVAILABLE lt  span gt       lt  --END-- gt   lt  div gt

User · Answer

Have a look on this example  x000D   x000D   switch           width  50px          height  17px          position  relative          display  inline-block                  switch input               display  none                      switch  slider               position  absolute              top  0              bottom  0              right  0              left  0              cursor  pointer              background-color   e7ecf1              border-radius  30px  important              border  0              padding  0              display  block              margin  12px 10px              min-height  11px                          switch  slider before                   position  absolute                  background-color   aaa                  height  15px                  width  15px                  content                      left  0px                  bottom  -2px                  border-radius  50                   transition  ease-in-out  5s                              switch  slider after                   content                      color  white                  display  block                  position  absolute                  transform  translate -50  -50                    top  50                   left  70                   transition  all  5s                  font-size  10px                  font-family  Verdana sans-serif                          switch input checked    slider after               transition  all  5s              left  30               content                          switch input checked    slider               background-color   d3d6d9                          switch input checked    slider before                   transform  translateX 15px                   background-color   26a2ac                x000D   lt label class  switch  gt                                           lt input type  checkbox    gt                                           lt div class  slider  gt  lt  div gt                                       lt  label gt  x000D   x000D   x000D

User · Answer

You could do it like this   x000D   x000D   switch     position  relative    display  inline-block    width  90px    height  34px      switch input  display none     slider     position  absolute    cursor  pointer    top  0    left  0    right  0    bottom  0    background-color   ca2222    -webkit-transition   4s    transition   4s      slider before     position  absolute    content        height  26px    width  26px    left  4px    bottom  4px    background-color  white    -webkit-transition   4s    transition   4s     input checked    slider     background-color   2ab934     input focus    slider     box-shadow  0 0 1px  2196F3     input checked    slider before     -webkit-transform  translateX 55px     -ms-transform  translateX 55px     transform  translateX 55px        ------ ADDED CSS ---------    on     display  none      on   off     color  white    position  absolute    transform  translate -50  -50      top  50     left  50     font-size  10px    font-family  Verdana  sans-serif     input checked   slider  on  display  block    input checked    slider  off  display  none      --------- END --------       Rounded sliders     slider round     border-radius  34px      slider round before     border-radius  50    x000D   lt label class  switch  gt    lt input type  checkbox  id  togBtn  gt    lt div class  slider round  gt     lt  --ADDED HTML -- gt     lt span class  on  gt ON lt  span gt     lt span class  off  gt OFF lt  span gt     lt  --END-- gt    lt  div gt   lt  label gt  x000D   x000D   x000D   Or pure CSS   x000D   x000D   switch     position  relative    display  inline-block    width  90px    height  34px      switch input  display none     slider     position  absolute    cursor  pointer    top  0    left  0    right  0    bottom  0    background-color   ca2222    -webkit-transition   4s    transition   4s     border-radius  34px      slider before     position  absolute    content        height  26px    width  26px    left  4px    bottom  4px    background-color  white    -webkit-transition   4s    transition   4s    border-radius  50      input checked    slider     background-color   2ab934     input focus    slider     box-shadow  0 0 1px  2196F3     input checked    slider before     -webkit-transform  translateX 26px     -ms-transform  translateX 26px     transform  translateX 55px        ------ ADDED CSS ---------    slider after    content  OFF    color  white   display  block   position  absolute   transform  translate -50  -50     top  50    left  50    font-size  10px   font-family  Verdana  sans-serif     input checked    slider after       content  ON        --------- END --------   x000D   lt label class  switch  gt   lt input type  checkbox  id  togBtn  gt   lt div class  slider round  gt  lt  div gt   lt  label gt  x000D   x000D   x000D

User · Answer

Square version of the toggle can be added by modifying the border radius  x000D   x000D   switch     position  relative    display  inline-block    width  90px    height  36px      switch input  display none     slider     position  absolute    cursor  pointer    top  0    left  0    right  0    bottom  0    background-color   ca2222    -webkit-transition   4s    transition   4s    border-radius  6px      slider before     position  absolute    content        height  34px    width  32px    top  1px    left  1px    right  1px    bottom  1px    background-color  white    transition  0 4s    border-radius  6px     input checked    slider     background-color   2ab934     input focus    slider     box-shadow  0 0 1px  2196F3     input checked    slider before     -webkit-transform  translateX 26px     -ms-transform  translateX 26px     transform  translateX 55px       slider after     content  OFF     color  white    display  block    position  absolute    transform  translate -50  -50      top  50     left  50     font-size  10px    font-family  Verdana  sans-serif    input checked    slider after     content  ON     x000D   lt label class  switch  gt     lt input type  checkbox  id  togBtn  gt     lt div class  slider  gt  lt  div gt   lt  label gt  x000D   x000D   x000D

User · Answer

switch                   width  50px              height  30px              position  relative              display inline-block              switch input                   display  none              slider                   position  absolute              top  0              bottom  0              right  0              left  0              cursor  pointer              background-color  gray              border-radius  30px              slider before                position  absolute          background-color   fff          height  20px          width  20px          content              left  5px          bottom  5px          border-radius  50           transition  ease-in-out  5s              slider after               content   Off            color  white          display  block          position  absolute          transform  translate -50  -50            top  50           left  70           transition  all  5s          font-size  10px          font-family  Verdana sans-serif             input checked    slider after               transition  all  5s          left  30           content   On             input checked    slider               background-color  blue              input checked    slider before               transform  translateX 20px                  The HTML CODE         lt label class  switch  gt                    lt input type  checkbox   gt                     lt div class  slider  gt                    lt  div gt           lt  label gt    If You want to add long text like activate or Deactivate  just make few changes    switch           width 90px    slider after        left  60     as you want in percenatge   input checked    slider after          left 40     exactly opposite of  slider after     and last  input checked    slider before       transform  translateX 60px     as per your choice but 60px is perfect     content as per your choice where you have witten  On  and  Off

User · Answer

x000D   x000D   switch   x000D    position  relative  x000D    display  inline-block  x000D    width  90px  x000D    height  34px  x000D    x000D   x000D   switch input  display none   x000D   x000D   slider   x000D    position  absolute  x000D    cursor  pointer  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D    background-color   ca2222  x000D    -webkit-transition   4s  x000D    transition   4s  x000D    x000D   x000D   slider before   x000D    position  absolute  x000D    content      x000D    height  26px  x000D    width  26px  x000D    left  4px  x000D    bottom  4px  x000D    background-color  white  x000D    -webkit-transition   4s  x000D    transition   4s  x000D    x000D   x000D  input checked    slider   x000D    background-color   2ab934  x000D    x000D   x000D  input focus    slider   x000D    box-shadow  0 0 1px  2196F3  x000D    x000D   x000D  input checked    slider before   x000D    -webkit-transform  translateX 55px   x000D    -ms-transform  translateX 55px   x000D    transform  translateX 55px   x000D    x000D   x000D    ------ ADDED CSS ---------   x000D   on x000D    x000D    display  none  x000D    x000D   x000D   on   off x000D    x000D    color  white  x000D    position  absolute  x000D    transform  translate -50  -50    x000D    top  50   x000D    left  50   x000D    font-size  10px  x000D    font-family  Verdana  sans-serif  x000D    x000D   x000D  input checked   slider  on x000D   display  block   x000D   x000D  input checked    slider  off x000D   display  none   x000D   x000D    --------- END --------   x000D   x000D     Rounded sliders    x000D   slider round   x000D    border-radius  34px  x000D    x000D   x000D   slider round before   x000D    border-radius  50    x000D   lt label class  switch  gt  lt input type  checkbox  id  togBtn  gt  lt div class  slider round  gt  lt  --ADDED HTML -- gt  lt span class  on  gt Confirmed lt  span gt  lt span class  off  gt NA lt  span gt  lt  --END-- gt  lt  div gt  lt  label gt  x000D   x000D   x000D

[html] How to add the text "ON" and "OFF" to toggle button

Examples related to html

Examples related to css

Examples related to toggle