How do you create a toggle button

Question

I want to create a toggle button in html using css  I want it so that when you click on it    it stays pushed in and than when you click it on it again it pops out    If theres no way of doing it just using css  Is there a way to do it using jQuery

User · Answer

I would be inclined to use a class in your css that alters the border style or border width when the button is depressed  so it gives the appearance of a toggle button

User · Answer

I would be inclined to use a class in your css that alters the border style or border width when the button is depressed  so it gives the appearance of a toggle button

User · Answer

As far as I was searching for answer too  and wanted to acomplish it with CSS  I found solution by CSS NINJA It is a nice impelmentation of  lt input type  checkbox  gt  and some css Live demo  Although it is not working in IE 8 you could implement selectivizr  and fix CSS where uses opacity to filter to make it work in IE   EDIT 2014   for new toggle buttons I do use solution found on Lea Verou blog visually similar to iOS checkbox

User · Answer

The good semantic way would be to use a checkbox  and then style it in different ways if it is checked or not  But there are no good ways do to it  You have to add extra span  extra div  and  for a really nice look  add some javascript   So the best solution is to use a small jQuery function and two background images for styling the two different statuses of the button  Example with an up down effect given by borders    x000D   x000D    document  ready function     x000D       a button   click function     x000D        this  toggleClass  down    x000D        x000D      x000D  a   x000D    background   ccc  x000D    cursor  pointer  x000D    border-top  solid 2px  eaeaea  x000D    border-left  solid 2px  eaeaea  x000D    border-bottom  solid 2px  777  x000D    border-right  solid 2px  777  x000D    padding  5px 5px  x000D    x000D   x000D  a down   x000D    background   bbb  x000D    border-top  solid 2px  777  x000D    border-left  solid 2px  777  x000D    border-bottom  solid 2px  eaeaea  x000D    border-right  solid 2px  eaeaea  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a id  button  title  button  gt Press Me lt  a gt  x000D   x000D   x000D    Obviously  you can add background images that represent button up and button down  and make the background color transparent

User · Answer

here is an example using pure css    x000D   x000D     cmn-toggle   x000D      position  absolute  x000D      margin-left  -9999px  x000D      visibility  hidden  x000D      x000D     cmn-toggle   label   x000D      display  block  x000D      position  relative  x000D      cursor  pointer  x000D      outline  none  x000D      user-select  none  x000D      x000D    input cmn-toggle-round   label   x000D      padding  2px  x000D      width  120px  x000D      height  60px  x000D      background-color   dddddd  x000D      border-radius  60px  x000D      x000D    input cmn-toggle-round   label before  x000D    input cmn-toggle-round   label after   x000D      display  block  x000D      position  absolute  x000D      top  1px  x000D      left  1px  x000D      bottom  1px  x000D      content      x000D      x000D    input cmn-toggle-round   label before   x000D      right  1px  x000D      background-color   f1f1f1  x000D      border-radius  60px  x000D      transition  background 0 4s  x000D      x000D    input cmn-toggle-round   label after   x000D      width  58px  x000D      background-color   fff  x000D      border-radius  100   x000D      box-shadow  0 2px 5px rgba 0  0  0  0 3   x000D      transition  margin 0 4s  x000D      x000D    input cmn-toggle-round checked   label before   x000D      background-color   8ce196  x000D      x000D    input cmn-toggle-round checked   label after   x000D      margin-left  60px  x000D      x000D   lt div class  switch  gt  x000D     lt input id  cmn-toggle-1  class  cmn-toggle cmn-toggle-round  type  checkbox  gt  x000D     lt label for  cmn-toggle-1  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I don t think using JS for creating a button is good practice  What if the user s browser deactivates JavaScript    Plus  you can just use a checkbox and a bit of CSS to do it  And it easy to retrieve the state of your checkbox   This is just one example  but you can style it how want   http   jsfiddle net 4gjZX   HTML   lt fieldset class  toggle  gt     lt input id  data-policy  type  checkbox  checked  checked    gt     lt label for  data-policy  gt     lt div class  toggle-button  gt       lt div class  toggle-tab  gt  lt  div gt     lt  div gt    Toggle    lt  label gt   lt  fieldset gt     CSS   toggle label     color   444    float  left    line-height  26px     toggle  toggle-button     margin  0px 10px 0px 0px    float  left    width  70px    height  26px    background-color   eeeeee    background-image  -webkit-gradient linear  left top  left bottom  from  eeeeee   to  fafafa      background-image  -webkit-linear-gradient top   eeeeee   fafafa     background-image  -moz-linear-gradient top   eeeeee   fafafa     background-image  -o-linear-gradient top   eeeeee   fafafa     background-image  -ms-linear-gradient top   eeeeee   fafafa     background-image  linear-gradient top   eeeeee   fafafa     filter  progid dximagetransform microsoft gradient GradientType 0  StartColorStr   eeeeee   EndColorStr   fafafa      border-radius  4px    -webkit-border-radius  4px    -moz-border-radius  4px    border  1px solid  D1D1D1     toggle  toggle-button  toggle-tab     width  30px    height  26px    background-color   fafafa    background-image  -webkit-gradient linear  left top  left bottom  from  fafafa   to  eeeeee      background-image  -webkit-linear-gradient top   fafafa   eeeeee     background-image  -moz-linear-gradient top   fafafa   eeeeee     background-image  -o-linear-gradient top   fafafa   eeeeee     background-image  -ms-linear-gradient top   fafafa   eeeeee     background-image  linear-gradient top   fafafa   eeeeee     filter  progid dximagetransform microsoft gradient GradientType 0  StartColorStr   fafafa   EndColorStr   eeeeee      border  1px solid  CCC    margin-left  -1px    margin-top  -1px    border-radius  4px    -webkit-border-radius  4px    -moz-border-radius  4px    -webkit-box-shadow  5px 0px 4px -5px  000000  0px 0px 0px 0px  000000    -moz-box-shadow  5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000    box-shadow  5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000     toggle input type checkbox      display  none     toggle input type checkbox  checked   label  toggle-button     background-color   2d71c2    background-image  -webkit-gradient linear  left top  left bottom  from  2d71c2   to  4ea1db      background-image  -webkit-linear-gradient top   2d71c2   4ea1db     background-image  -moz-linear-gradient top   2d71c2   4ea1db     background-image  -o-linear-gradient top   2d71c2   4ea1db     background-image  -ms-linear-gradient top   2d71c2   4ea1db     background-image  linear-gradient top   2d71c2   4ea1db     filter  progid dximagetransform microsoft gradient GradientType 0  StartColorStr   2d71c2   EndColorStr   4ea1db       toggle input type checkbox  checked   label  toggle-button  toggle-tab     margin-left  39px    -webkit-box-shadow  -5px 0px 4px -5px  000000  0px 0px 0px 0px  000000    -moz-box-shadow  -5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000    box-shadow  -5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000       Hope this helps

User · Answer

There s a jquery plugin by Swizec  which can do this among other things  https   github com Swizec styled-button   The old link was http   swizec com code styledButton   I didn t fully test the replacement  just found it w Google

User · Answer

I don t think using JS for creating a button is good practice  What if the user s browser deactivates JavaScript    Plus  you can just use a checkbox and a bit of CSS to do it  And it easy to retrieve the state of your checkbox   This is just one example  but you can style it how want   http   jsfiddle net 4gjZX   HTML   lt fieldset class  toggle  gt     lt input id  data-policy  type  checkbox  checked  checked    gt     lt label for  data-policy  gt     lt div class  toggle-button  gt       lt div class  toggle-tab  gt  lt  div gt     lt  div gt    Toggle    lt  label gt   lt  fieldset gt     CSS   toggle label     color   444    float  left    line-height  26px     toggle  toggle-button     margin  0px 10px 0px 0px    float  left    width  70px    height  26px    background-color   eeeeee    background-image  -webkit-gradient linear  left top  left bottom  from  eeeeee   to  fafafa      background-image  -webkit-linear-gradient top   eeeeee   fafafa     background-image  -moz-linear-gradient top   eeeeee   fafafa     background-image  -o-linear-gradient top   eeeeee   fafafa     background-image  -ms-linear-gradient top   eeeeee   fafafa     background-image  linear-gradient top   eeeeee   fafafa     filter  progid dximagetransform microsoft gradient GradientType 0  StartColorStr   eeeeee   EndColorStr   fafafa      border-radius  4px    -webkit-border-radius  4px    -moz-border-radius  4px    border  1px solid  D1D1D1     toggle  toggle-button  toggle-tab     width  30px    height  26px    background-color   fafafa    background-image  -webkit-gradient linear  left top  left bottom  from  fafafa   to  eeeeee      background-image  -webkit-linear-gradient top   fafafa   eeeeee     background-image  -moz-linear-gradient top   fafafa   eeeeee     background-image  -o-linear-gradient top   fafafa   eeeeee     background-image  -ms-linear-gradient top   fafafa   eeeeee     background-image  linear-gradient top   fafafa   eeeeee     filter  progid dximagetransform microsoft gradient GradientType 0  StartColorStr   fafafa   EndColorStr   eeeeee      border  1px solid  CCC    margin-left  -1px    margin-top  -1px    border-radius  4px    -webkit-border-radius  4px    -moz-border-radius  4px    -webkit-box-shadow  5px 0px 4px -5px  000000  0px 0px 0px 0px  000000    -moz-box-shadow  5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000    box-shadow  5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000     toggle input type checkbox      display  none     toggle input type checkbox  checked   label  toggle-button     background-color   2d71c2    background-image  -webkit-gradient linear  left top  left bottom  from  2d71c2   to  4ea1db      background-image  -webkit-linear-gradient top   2d71c2   4ea1db     background-image  -moz-linear-gradient top   2d71c2   4ea1db     background-image  -o-linear-gradient top   2d71c2   4ea1db     background-image  -ms-linear-gradient top   2d71c2   4ea1db     background-image  linear-gradient top   2d71c2   4ea1db     filter  progid dximagetransform microsoft gradient GradientType 0  StartColorStr   2d71c2   EndColorStr   4ea1db       toggle input type checkbox  checked   label  toggle-button  toggle-tab     margin-left  39px    -webkit-box-shadow  -5px 0px 4px -5px  000000  0px 0px 0px 0px  000000    -moz-box-shadow  -5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000    box-shadow  -5px 0px 4px -5px rgba 0  0  0  0 3   0px 0px 0px 0px  000000       Hope this helps

User · Answer

Try    lt li gt Text To go with Toggle Button lt span class    toggle  gt  lt input type    checkbox  class    toggle  name    somename  id    someid    gt  lt  span gt  lt  li gt    And make sure in the    lt head gt  lt link rel    stylesheet  src    theme css  gt   from jqtouch - downloadable online         lt link rel    text javascript  src    jquery js  gt   also from jqtouch   lt  head gt    Remember when you are coding this  only somename and someid can change in the input tag  otherwise it doesn t work

User · Answer

Here is one of the example variant  more detail described  of ToggleButton using jQuery with  lt label for  input  gt  implementation   1st we will create container for our ToggleButton using classic HTML  lt input gt  and  lt label gt    lt span gt     lt input type  checkbox  value  1  name  some feature to select  id  feature cb  style  display  none   gt   lt  -- We can hide checkbox bec  we want  lt label gt  to be a ToggleButton  so we don t need to show it  It is used as our value holder -- gt     lt label for  feature cb  id  label for some feature  gt       lt img alt  Stylish image  src   images icons feature png  gt     lt  label gt   lt  span gt    Next we will define function for toggling our button  Our button actually is the usual  lt label gt  which we will be styling to represent value toggling   function toggleButton button     var  for   button getAttribute  for       defining for which element this label is  suppose element is a checkbox  bec  we are making ToggleButton      var  toggleID    input    for     composing selector ID string to select our toggle element  checkbox  var  toggle       toggleID       selecting checkbox to work on var isChecked     toggle is   checked       defining the state with negation bec  change value event will have place later  so we negating current state to retrieve inverse  next    if  isChecked        button  addClass  SelectedButtonClass       if it is checked - gt  adding nice class to our button   lt label gt  in our case  to show that value was toggled else       button  removeClass  SelectedButtonClass       if value  or feature  was unselected by clicking the button   lt label gt   - gt  removing  SelectedButtonClass  or simply removing all classes from element      Function is implemented in a reusable way  You can use it for more than one  two or even three ToggleButtons you ve created       and finally     to make it work as expected  we should bind toggle function to an event   change  event  of our improvised  lt label gt  button  it will be click event bec  we are not altering the checkbox directly  so no change event can be fired for  lt label gt       document  ready function             some feature label   click function              toggleButton this      call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it                  some other feature label   click function              toggleButton this      doing the same for any other feature we want to represent in a way of ToggleButton                With CSS we can define backgorund-image or some border to represent the change in value whilst  lt label gt  will do the job for us in altering the value of a checkbox      Hope this helps someone

User · Answer

Try    lt li gt Text To go with Toggle Button lt span class    toggle  gt  lt input type    checkbox  class    toggle  name    somename  id    someid    gt  lt  span gt  lt  li gt    And make sure in the    lt head gt  lt link rel    stylesheet  src    theme css  gt   from jqtouch - downloadable online         lt link rel    text javascript  src    jquery js  gt   also from jqtouch   lt  head gt    Remember when you are coding this  only somename and someid can change in the input tag  otherwise it doesn t work

User · Answer

I would be inclined to use a class in your css that alters the border style or border width when the button is depressed  so it gives the appearance of a toggle button

User · Answer

The good semantic way would be to use a checkbox  and then style it in different ways if it is checked or not  But there are no good ways do to it  You have to add extra span  extra div  and  for a really nice look  add some javascript   So the best solution is to use a small jQuery function and two background images for styling the two different statuses of the button  Example with an up down effect given by borders    x000D   x000D    document  ready function     x000D       a button   click function     x000D        this  toggleClass  down    x000D        x000D      x000D  a   x000D    background   ccc  x000D    cursor  pointer  x000D    border-top  solid 2px  eaeaea  x000D    border-left  solid 2px  eaeaea  x000D    border-bottom  solid 2px  777  x000D    border-right  solid 2px  777  x000D    padding  5px 5px  x000D    x000D   x000D  a down   x000D    background   bbb  x000D    border-top  solid 2px  777  x000D    border-left  solid 2px  777  x000D    border-bottom  solid 2px  eaeaea  x000D    border-right  solid 2px  eaeaea  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a id  button  title  button  gt Press Me lt  a gt  x000D   x000D   x000D    Obviously  you can add background images that represent button up and button down  and make the background color transparent

User · Answer

The good semantic way would be to use a checkbox  and then style it in different ways if it is checked or not  But there are no good ways do to it  You have to add extra span  extra div  and  for a really nice look  add some javascript   So the best solution is to use a small jQuery function and two background images for styling the two different statuses of the button  Example with an up down effect given by borders    x000D   x000D    document  ready function     x000D       a button   click function     x000D        this  toggleClass  down    x000D        x000D      x000D  a   x000D    background   ccc  x000D    cursor  pointer  x000D    border-top  solid 2px  eaeaea  x000D    border-left  solid 2px  eaeaea  x000D    border-bottom  solid 2px  777  x000D    border-right  solid 2px  777  x000D    padding  5px 5px  x000D    x000D   x000D  a down   x000D    background   bbb  x000D    border-top  solid 2px  777  x000D    border-left  solid 2px  777  x000D    border-bottom  solid 2px  eaeaea  x000D    border-right  solid 2px  eaeaea  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a id  button  title  button  gt Press Me lt  a gt  x000D   x000D   x000D    Obviously  you can add background images that represent button up and button down  and make the background color transparent

User · Answer

If you want a proper button then you ll need some javascript  Something like this  needs some work on the styling but you get the gist   Wouldn t bother using jquery for something so trivial to be honest    lt html gt   lt head gt   lt style type  text css  gt   on    border 1px outset  color  369  background  efefef       off   border 1px outset  color  369  background  f9d543      lt  style gt    lt script language  javascript  gt  function togglestyle el       if el className     on             el className  off         else           el className  on            lt  script gt    lt  head gt    lt body gt   lt input type  button  id  btn  value  button  class  off  onclick  togglestyle this     gt   lt  body gt   lt  html gt

User · Answer

You could use an anchor element   lt a gt  lt  a gt    and use a active and a link to change the background image to toggle on or off  Just a thought   Edit  The above method doesn t work too well for toggle  But you don t need to use jquery  Write a simple onClick javascript function for the element  which changes the background image appropriately to make it look like the button is pressed  and set some flag  Then on next click  image and flag is is reverted  Like so  var flag   0  function toggle    if flag  0       document getElementById  toggleDiv   style backgroundImage  path to img img1 gif       flag 1    else if flag  1       document getElementById  toggleDiv   style backgroundImage  path to img img2 gif       flag 0        And the html like so      lt div id  toggleDiv  onclick  toggle    gt Some thing lt  div gt

User · Answer

Try this bit   input type  button                              data-bind  css  on toggleButton  off toggleButton  true  value toggleButton click  function      data toggleButton    data toggleButton         gt   in viewModel self toggleButton   ko observable false

User · Answer

You can just use toggleClass   to track state  Then you check if button element has the class  like this      button toggler   click  function          me     this        me toggleClass  off        if  me is   off             alert  hi         else           alert  bye                And I use the button element for buttons for semantic reasons    lt button class  toggler  gt Toggle me lt  button gt

User · Answer

You can just use toggleClass   to track state  Then you check if button element has the class  like this      button toggler   click  function          me     this        me toggleClass  off        if  me is   off             alert  hi         else           alert  bye                And I use the button element for buttons for semantic reasons    lt button class  toggler  gt Toggle me lt  button gt

User · Answer

As far as I was searching for answer too  and wanted to acomplish it with CSS  I found solution by CSS NINJA It is a nice impelmentation of  lt input type  checkbox  gt  and some css Live demo  Although it is not working in IE 8 you could implement selectivizr  and fix CSS where uses opacity to filter to make it work in IE   EDIT 2014   for new toggle buttons I do use solution found on Lea Verou blog visually similar to iOS checkbox

User · Answer

The good semantic way would be to use a checkbox  and then style it in different ways if it is checked or not  But there are no good ways do to it  You have to add extra span  extra div  and  for a really nice look  add some javascript   So the best solution is to use a small jQuery function and two background images for styling the two different statuses of the button  Example with an up down effect given by borders    x000D   x000D    document  ready function     x000D       a button   click function     x000D        this  toggleClass  down    x000D        x000D      x000D  a   x000D    background   ccc  x000D    cursor  pointer  x000D    border-top  solid 2px  eaeaea  x000D    border-left  solid 2px  eaeaea  x000D    border-bottom  solid 2px  777  x000D    border-right  solid 2px  777  x000D    padding  5px 5px  x000D    x000D   x000D  a down   x000D    background   bbb  x000D    border-top  solid 2px  777  x000D    border-left  solid 2px  777  x000D    border-bottom  solid 2px  eaeaea  x000D    border-right  solid 2px  eaeaea  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt a id  button  title  button  gt Press Me lt  a gt  x000D   x000D   x000D    Obviously  you can add background images that represent button up and button down  and make the background color transparent

User · Answer

You could use an anchor element   lt a gt  lt  a gt    and use a active and a link to change the background image to toggle on or off  Just a thought   Edit  The above method doesn t work too well for toggle  But you don t need to use jquery  Write a simple onClick javascript function for the element  which changes the background image appropriately to make it look like the button is pressed  and set some flag  Then on next click  image and flag is is reverted  Like so  var flag   0  function toggle    if flag  0       document getElementById  toggleDiv   style backgroundImage  path to img img1 gif       flag 1    else if flag  1       document getElementById  toggleDiv   style backgroundImage  path to img img2 gif       flag 0        And the html like so      lt div id  toggleDiv  onclick  toggle    gt Some thing lt  div gt

User · Answer

You could use an anchor element   lt a gt  lt  a gt    and use a active and a link to change the background image to toggle on or off  Just a thought   Edit  The above method doesn t work too well for toggle  But you don t need to use jquery  Write a simple onClick javascript function for the element  which changes the background image appropriately to make it look like the button is pressed  and set some flag  Then on next click  image and flag is is reverted  Like so  var flag   0  function toggle    if flag  0       document getElementById  toggleDiv   style backgroundImage  path to img img1 gif       flag 1    else if flag  1       document getElementById  toggleDiv   style backgroundImage  path to img img2 gif       flag 0        And the html like so      lt div id  toggleDiv  onclick  toggle    gt Some thing lt  div gt

User · Answer

Try this bit   input type  button                              data-bind  css  on toggleButton  off toggleButton  true  value toggleButton click  function      data toggleButton    data toggleButton         gt   in viewModel self toggleButton   ko observable false

User · Answer

JQuery UI makes light work out of creating toggle buttons   Just put this   lt label for  myToggleButton  gt my toggle button caption lt  label gt   lt input type  checkbox  id  myToggleButton    gt    on your page and then in your body onLoad or your   ready    or some object literals init   function if your building an ajax site    drop some JQuery like so       myToggleButton   button     thats it   don t forget the  lt  label for     gt  because JQueryUI uses that for the body of the toggle button     From there you just work with it like any other input  checkbox  because that is what the underlying control still is but JQuery UI just skins it to look like a pretty toggle button on screen

User · Answer

I would be inclined to use a class in your css that alters the border style or border width when the button is depressed  so it gives the appearance of a toggle button

User · Answer

In combination with this answer  you can also use this kind of style that is like mobile settings toggler   HTML  lt a href  quot   quot  class  quot toggler quot  gt  amp nbsp  lt  a gt   lt a href  quot   quot  class  quot toggler off quot  gt  amp nbsp  lt  a gt   lt a href  quot   quot  class  quot toggler quot  gt  amp nbsp  lt  a gt   CSS a toggler       background  green      cursor  pointer      border  2px solid black      border-right-width  15px      padding  0 5px      border-radius  5px      text-decoration  none      transition  all  5s ease     a toggler off       background  red      border-right-width  2px      border-left-width  15px     jQuery   document  ready function           a toggler   click function              this  toggleClass  off                 Could be much prettier  but gives the idea  One advantage is that it can be animated with CSS Fiddler

User · Answer

You could use an anchor element   lt a gt  lt  a gt    and use a active and a link to change the background image to toggle on or off  Just a thought   Edit  The above method doesn t work too well for toggle  But you don t need to use jquery  Write a simple onClick javascript function for the element  which changes the background image appropriately to make it look like the button is pressed  and set some flag  Then on next click  image and flag is is reverted  Like so  var flag   0  function toggle    if flag  0       document getElementById  toggleDiv   style backgroundImage  path to img img1 gif       flag 1    else if flag  1       document getElementById  toggleDiv   style backgroundImage  path to img img2 gif       flag 0        And the html like so      lt div id  toggleDiv  onclick  toggle    gt Some thing lt  div gt

User · Answer

If you want a proper button then you ll need some javascript  Something like this  needs some work on the styling but you get the gist   Wouldn t bother using jquery for something so trivial to be honest    lt html gt   lt head gt   lt style type  text css  gt   on    border 1px outset  color  369  background  efefef       off   border 1px outset  color  369  background  f9d543      lt  style gt    lt script language  javascript  gt  function togglestyle el       if el className     on             el className  off         else           el className  on            lt  script gt    lt  head gt    lt body gt   lt input type  button  id  btn  value  button  class  off  onclick  togglestyle this     gt   lt  body gt   lt  html gt

User · Answer

JQuery UI makes light work out of creating toggle buttons   Just put this   lt label for  myToggleButton  gt my toggle button caption lt  label gt   lt input type  checkbox  id  myToggleButton    gt    on your page and then in your body onLoad or your   ready    or some object literals init   function if your building an ajax site    drop some JQuery like so       myToggleButton   button     thats it   don t forget the  lt  label for     gt  because JQueryUI uses that for the body of the toggle button     From there you just work with it like any other input  checkbox  because that is what the underlying control still is but JQuery UI just skins it to look like a pretty toggle button on screen

User · Answer

here is an example using pure css    x000D   x000D     cmn-toggle   x000D      position  absolute  x000D      margin-left  -9999px  x000D      visibility  hidden  x000D      x000D     cmn-toggle   label   x000D      display  block  x000D      position  relative  x000D      cursor  pointer  x000D      outline  none  x000D      user-select  none  x000D      x000D    input cmn-toggle-round   label   x000D      padding  2px  x000D      width  120px  x000D      height  60px  x000D      background-color   dddddd  x000D      border-radius  60px  x000D      x000D    input cmn-toggle-round   label before  x000D    input cmn-toggle-round   label after   x000D      display  block  x000D      position  absolute  x000D      top  1px  x000D      left  1px  x000D      bottom  1px  x000D      content      x000D      x000D    input cmn-toggle-round   label before   x000D      right  1px  x000D      background-color   f1f1f1  x000D      border-radius  60px  x000D      transition  background 0 4s  x000D      x000D    input cmn-toggle-round   label after   x000D      width  58px  x000D      background-color   fff  x000D      border-radius  100   x000D      box-shadow  0 2px 5px rgba 0  0  0  0 3   x000D      transition  margin 0 4s  x000D      x000D    input cmn-toggle-round checked   label before   x000D      background-color   8ce196  x000D      x000D    input cmn-toggle-round checked   label after   x000D      margin-left  60px  x000D      x000D   lt div class  switch  gt  x000D     lt input id  cmn-toggle-1  class  cmn-toggle cmn-toggle-round  type  checkbox  gt  x000D     lt label for  cmn-toggle-1  gt  lt  label gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use the  active  pseudoclass  it won t work on IE6  though  for elements other than links   a active          desired style here

User · Answer

If you want a proper button then you ll need some javascript  Something like this  needs some work on the styling but you get the gist   Wouldn t bother using jquery for something so trivial to be honest    lt html gt   lt head gt   lt style type  text css  gt   on    border 1px outset  color  369  background  efefef       off   border 1px outset  color  369  background  f9d543      lt  style gt    lt script language  javascript  gt  function togglestyle el       if el className     on             el className  off         else           el className  on            lt  script gt    lt  head gt    lt body gt   lt input type  button  id  btn  value  button  class  off  onclick  togglestyle this     gt   lt  body gt   lt  html gt

User · Answer

You can use the  active  pseudoclass  it won t work on IE6  though  for elements other than links   a active          desired style here

User · Answer

There s a jquery plugin by Swizec  which can do this among other things  https   github com Swizec styled-button   The old link was http   swizec com code styledButton   I didn t fully test the replacement  just found it w Google

User · Answer

You can use the  active  pseudoclass  it won t work on IE6  though  for elements other than links   a active          desired style here

User · Answer

In combination with this answer  you can also use this kind of style that is like mobile settings toggler   HTML  lt a href  quot   quot  class  quot toggler quot  gt  amp nbsp  lt  a gt   lt a href  quot   quot  class  quot toggler off quot  gt  amp nbsp  lt  a gt   lt a href  quot   quot  class  quot toggler quot  gt  amp nbsp  lt  a gt   CSS a toggler       background  green      cursor  pointer      border  2px solid black      border-right-width  15px      padding  0 5px      border-radius  5px      text-decoration  none      transition  all  5s ease     a toggler off       background  red      border-right-width  2px      border-left-width  15px     jQuery   document  ready function           a toggler   click function              this  toggleClass  off                 Could be much prettier  but gives the idea  One advantage is that it can be animated with CSS Fiddler

User · Answer

If you want a proper button then you ll need some javascript  Something like this  needs some work on the styling but you get the gist   Wouldn t bother using jquery for something so trivial to be honest    lt html gt   lt head gt   lt style type  text css  gt   on    border 1px outset  color  369  background  efefef       off   border 1px outset  color  369  background  f9d543      lt  style gt    lt script language  javascript  gt  function togglestyle el       if el className     on             el className  off         else           el className  on            lt  script gt    lt  head gt    lt body gt   lt input type  button  id  btn  value  button  class  off  onclick  togglestyle this     gt   lt  body gt   lt  html gt

User · Answer

Here is one of the example variant  more detail described  of ToggleButton using jQuery with  lt label for  input  gt  implementation   1st we will create container for our ToggleButton using classic HTML  lt input gt  and  lt label gt    lt span gt     lt input type  checkbox  value  1  name  some feature to select  id  feature cb  style  display  none   gt   lt  -- We can hide checkbox bec  we want  lt label gt  to be a ToggleButton  so we don t need to show it  It is used as our value holder -- gt     lt label for  feature cb  id  label for some feature  gt       lt img alt  Stylish image  src   images icons feature png  gt     lt  label gt   lt  span gt    Next we will define function for toggling our button  Our button actually is the usual  lt label gt  which we will be styling to represent value toggling   function toggleButton button     var  for   button getAttribute  for       defining for which element this label is  suppose element is a checkbox  bec  we are making ToggleButton      var  toggleID    input    for     composing selector ID string to select our toggle element  checkbox  var  toggle       toggleID       selecting checkbox to work on var isChecked     toggle is   checked       defining the state with negation bec  change value event will have place later  so we negating current state to retrieve inverse  next    if  isChecked        button  addClass  SelectedButtonClass       if it is checked - gt  adding nice class to our button   lt label gt  in our case  to show that value was toggled else       button  removeClass  SelectedButtonClass       if value  or feature  was unselected by clicking the button   lt label gt   - gt  removing  SelectedButtonClass  or simply removing all classes from element      Function is implemented in a reusable way  You can use it for more than one  two or even three ToggleButtons you ve created       and finally     to make it work as expected  we should bind toggle function to an event   change  event  of our improvised  lt label gt  button  it will be click event bec  we are not altering the checkbox directly  so no change event can be fired for  lt label gt       document  ready function             some feature label   click function              toggleButton this      call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it                  some other feature label   click function              toggleButton this      doing the same for any other feature we want to represent in a way of ToggleButton                With CSS we can define backgorund-image or some border to represent the change in value whilst  lt label gt  will do the job for us in altering the value of a checkbox      Hope this helps someone

User · Answer

You can use the  active  pseudoclass  it won t work on IE6  though  for elements other than links   a active          desired style here

[jquery] How do you create a toggle button?

Examples related to jquery

Examples related to html

Examples related to css