Title: Switch Button more intuitive
Last modified: May 29, 2018

---

# Switch Button more intuitive

 *  [Bonaldi](https://wordpress.org/support/users/bonaldi/)
 * (@bonaldi)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/)
 * Hi [@fclaussen](https://wordpress.org/support/users/fclaussen/),
 * I propose this basis code to customize switch button with [dashicons-controls-play](https://developer.wordpress.org/resource/dashicons/#controls-play)
   and [dashicons-controls-pause](https://developer.wordpress.org/resource/dashicons/#controls-pause)
   included, what do you think?
 * Red when OFF, green when ON.
 * CSS:
 *     ```
           .onoffswitch {
               position: relative; width: 65px;
               -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
           }
           .onoffswitch-checkbox {
               display: none;
           }
           .onoffswitch-label {
               display: block; overflow: hidden; cursor: pointer;
               border: 2px solid #FBFBFB; border-radius: 20px;
           }
           .onoffswitch-inner {
               display: block; width: 200%; margin-left: -100%;
               transition: margin 0.3s ease-in 0s;
           }
           .onoffswitch-inner:before, .onoffswitch-inner:after {
               display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
               font-size: 34px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
               box-sizing: border-box;
           }
           .onoffswitch-inner:before {
       	font-family: 'dashicons';
       	content: "\f523";
               padding-left: 10px;
               background-color: #4DDB0B; color: #FBFBFB;
           }
           .onoffswitch-inner:after {
       	font-family: 'dashicons';
       	content: "\f522";
               padding-right: 10px;
               background-color: #FB1B1B; color: #FBFBFB;
               text-align: right;
           }
           .onoffswitch-switch {
               display: block; width: 18px; margin: 5px;
               background: #FBFBFB;
               position: absolute; top: 0; bottom: 0;
               right: 33px;
               border: 2px solid #FBFBFB; border-radius: 20px;
               transition: all 0.3s ease-in 0s; 
           }
           .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
               margin-left: 0;
           }
           .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
               right: 0px; 
           }
       ```
   
 * HTML:
 *     ```
           <div class="onoffswitch">
               <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
               <label class="onoffswitch-label" for="myonoffswitch">
                   <span class="onoffswitch-inner"></span>
                   <span class="onoffswitch-switch"></span>
               </label>
           </div>
       ```
   
 * I also propose to replace the blue color of the plugin by a more neutral color
   because the blue is not necessarily appropriate with the colors of all sites.
 * Regards

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Fernando Claussen](https://wordpress.org/support/users/fclaussen/)
 * (@fclaussen)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/#post-10334109)
 * Do you have a codepen with this?
 * We are using the wp blue. We will make these colors available as settings in 
   the future so people can easily customize.
 *  Thread Starter [Bonaldi](https://wordpress.org/support/users/bonaldi/)
 * (@bonaldi)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/#post-10334168)
 * No codepen, but you can build switch buttons here: [https://proto.io/freebies/onoff/](https://proto.io/freebies/onoff/)
   
   And replace ON and OFF (because it will be difficult to translate) with dashicons,
   which is the WP admin font.
 *  Plugin Author [Fernando Claussen](https://wordpress.org/support/users/fclaussen/)
 * (@fclaussen)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/#post-10337302)
 * [@matthewfarlymn](https://wordpress.org/support/users/matthewfarlymn/)
 * I’ve been meaning to switch to something with an ON/OFF but it would be difficult
   for translations. Maybe icons would be a good fit.
 * Thoughts?
 *  Thread Starter [Bonaldi](https://wordpress.org/support/users/bonaldi/)
 * (@bonaldi)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/#post-10337588)
 * [@fclaussen](https://wordpress.org/support/users/fclaussen/) : Personally, I 
   use this type of switch for custom controls of the WP customizer, and it does
   the job.
 *  Plugin Author [Fernando Claussen](https://wordpress.org/support/users/fclaussen/)
 * (@fclaussen)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/#post-10337700)
 * I agree. Matthew is the one that takes care of the UI. I did the first draft 
   and he made everything prettier. \o/
 * Other users requested the same thing.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Switch Button more intuitive’ is closed to new replies.

 * ![](https://ps.w.org/gdpr/assets/icon.svg?rev=1837142)
 * [GDPR](https://wordpress.org/plugins/gdpr/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gdpr/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gdpr/)
 * [Active Topics](https://wordpress.org/support/plugin/gdpr/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gdpr/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gdpr/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Fernando Claussen](https://wordpress.org/support/users/fclaussen/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/switch-button-more-intuitive/#post-10337700)
 * Status: not resolved