By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
463,050 Members | 465 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 463,050 IT Pros & Developers. It's quick & easy.

toggle button

P: 1
how to make toggle button with on/off text outside the button
Attached Images
File Type: png toggle button.png (6.2 KB, 12 views)
1 Week Ago #1
Share this Question
Share on Google+
2 Replies

100+
P: 189
html
Expand|Select|Wrap|Line Numbers
  1. <div class="switch">
  2.     <div class="switch__title">OFF
  3.         <label class="switch__label">
  4.             <input type="checkbox" class="switch__input"/>
  5.             <span class="switch__content"></span>
  6.             <span class="switch__circle"></span>
  7.         </label>
  8.     </div>
  9. </div>
css
Expand|Select|Wrap|Line Numbers
  1. .switch__title{
  2. font-size: 14px;
  3. }
  4. .switch__label {
  5.     width: 37px;
  6.     position: relative;
  7.     display: inline-block;
  8.     padding-top: 3px;
  9. }
  10. .switch__content {
  11.     display: block;
  12.   cursor: pointer;
  13.   position: relative;
  14.   border-radius: 7px;
  15.   height: 14px;
  16.   background-color: rgba(34,31,31,.26);
  17.   -webkit-transition: all .1s .4s;
  18.        -moz-transition: all .1s .4s;
  19.         -ms-transition: all .1s .4s;
  20.          -o-transition: all .1s .4s;
  21.             transition: all .1s .4s;
  22.     overflow: hidden;
  23. }
  24.  
  25. .switch__content:after {
  26.     content: "";
  27.     display: block;
  28.     position: absolute;
  29.  
  30.     width: 0;
  31.     height: 100%;
  32.     top: 0;
  33.     left: 0;
  34.  
  35.     border-radius: 7px;
  36.     -webkit-transition: all .5s;
  37.        -moz-transition: all .5s;
  38.         -ms-transition: all .5s;
  39.          -o-transition: all .5s;
  40.             transition: all .5s;
  41. }
  42. .switch__input {
  43.     display: none;
  44. }
  45. .switch__circle {
  46.     display: block;
  47.     top: 0px;
  48.     left: 0px;
  49.     position: absolute;
  50.     width: 20px;
  51.     height: 20px;
  52.     -webkit-border-radius: 10px;
  53.             border-radius: 10px;
  54.     background-color: #F1F1F1;
  55.     -webkit-transition: all .5s;
  56.        -moz-transition: all .5s;
  57.         -ms-transition: all .5s;
  58.          -o-transition: all .5s;
  59.             transition: all .5s;
  60.     -webkit-box-shadow: 0 2px 2px #ccc;
  61.             box-shadow: 0 2px 2px #ccc;
  62. }
  63. .switch__input:checked ~ .switch__circle {
  64.     left: 18px;
  65.     background-color: #009688;
  66. }
  67. .switch__input:checked ~ .switch__content {
  68.  
  69.     border-color: transparent;
  70.     -webkit-transition: all 0s;
  71.        -moz-transition: all 0s;
  72.         -ms-transition: all 0s;
  73.          -o-transition: all 0s;
  74.             transition: all 0s;
  75. }
  76.  
  77. .switch__input:checked ~ .switch__content:after {
  78.     background-color: rgba(0,150,136,.5);
  79.     width: 100%;
  80. }
1 Week Ago #2

P: 66
Hey,

Try Below code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. .switch {
  7.   position: relative;
  8.   display: inline-block;
  9.   width: 60px;
  10.   height: 34px;
  11. }
  12.  
  13. .switch input { 
  14.   opacity: 0;
  15.   width: 0;
  16.   height: 0;
  17. }
  18.  
  19. .slider {
  20.   position: absolute;
  21.   cursor: pointer;
  22.   top: 0;
  23.   left: 0;
  24.   right: 0;
  25.   bottom: 0;
  26.   background-color: #ccc;
  27.   -webkit-transition: .4s;
  28.   transition: .4s;
  29. }
  30.  
  31. .slider:before {
  32.   position: absolute;
  33.   content: "";
  34.   height: 26px;
  35.   width: 26px;
  36.   left: 4px;
  37.   bottom: 4px;
  38.   background-color: white;
  39.   -webkit-transition: .4s;
  40.   transition: .4s;
  41. }
  42.  
  43. input:checked + .slider {
  44.   background-color: #2196F3;
  45. }
  46.  
  47. input:focus + .slider {
  48.   box-shadow: 0 0 1px #2196F3;
  49. }
  50.  
  51. input:checked + .slider:before {
  52.   -webkit-transform: translateX(26px);
  53.   -ms-transform: translateX(26px);
  54.   transform: translateX(26px);
  55. }
  56.  
  57. /* Rounded sliders */
  58. .slider.round {
  59.   border-radius: 34px;
  60. }
  61.  
  62. .slider.round:before {
  63.   border-radius: 50%;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68.  
  69. <h2>Toggle Switch</h2>
  70.  
  71. <label class="switch">
  72.   <input type="checkbox" checked>
  73.   <span class="slider round"></span>
  74. </label>
  75.  
  76. </body>
  77. </html> 
Refer following site:

https://freefrontend.com/css-toggle-switches/
2 Days Ago #3

Post your reply

Sign in to post your reply or Sign up for a free account.