plumes/public/buttons/pl-button-onoff.min.css

Flying-fast Metro future vision components

.pl-button-onoff,.pl-button-onoff label{cursor:pointer;-webkit-touch-callout:none;-khtml-user-select:none;font-weight:300;margin:0;padding:0;display:inline-block}.pl-button-onoff{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;background:0 0;font-size:1.4rem;line-height:1.4;height:auto;text-transform:none}.pl-button-onoff label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;line-height:1.3;white-space:normal}.pl-button-onoff div{position:relative;display:inline-block;vertical-align:top;width:4rem;height:2rem;background:#ddd;border-radius:1rem;margin-left:.5rem;-webkit-transition:background .25s cubic-bezier(.165,.84,.44,1);-moz-transition:background .25s cubic-bezier(.165,.84,.44,1);-ms-transition:background .25s cubic-bezier(.165,.84,.44,1);-o-transition:background .25s cubic-bezier(.165,.84,.44,1);transition:background .25s cubic-bezier(.165,.84,.44,1)}.pl-button-onoff div span{position:absolute;height:1.4rem;width:1.5rem;left:.5rem;top:.3rem;border-radius:50%;background:#bbb;-webkit-transition:all .25s cubic-bezier(.165,.84,.44,1);-moz-transition:all .25s cubic-bezier(.165,.84,.44,1);-ms-transition:all .25s cubic-bezier(.165,.84,.44,1);-o-transition:all .25s cubic-bezier(.165,.84,.44,1);transition:all .25s cubic-bezier(.165,.84,.44,1)}.pl-button-onoff.on div{background:#7BDE7F}.pl-button-onoff.on div span{left:2rem;background:#4CAF50}