/* Button Theme */ .button-group { border: none; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left; } .button-default { background-color: #ddd; color: #000; } .button-default:hover { background-color: #ccc; color: #000; text-decoration: none; } .button-on { background-color: #4CAF50; color: #fff; } .button-on:hover { background-color: #3e8e41; color: #fff; text-decoration: none; } .button-off { background-color: #B22222; color: #fff; } .button-off:hover { background-color: #800000; color: #fff; text-decoration: none; } .button-off[disabled], .button-on[disabled], .button-default[disabled] { cursor: not-allowed; } /* Core */ .tgl-sw { display: none; } .tgl-sw, .tgl-sw:after, .tgl-sw:before, .tgl-sw *, .tgl-sw *:after, .tgl-sw *:before, .tgl-sw + .btn-switch { box-sizing: border-box; } .tgl-sw::-moz-selection, .tgl-sw:after::-moz-selection, .tgl-sw:before::-moz-selection, .tgl-sw *::-moz-selection, .tgl-sw *:after::-moz-selection, .tgl-sw *:before::-moz-selection, .tgl-sw + .btn-switch::-moz-selection { background: none; } .tgl-sw::selection, .tgl-sw:after::selection, .tgl-sw:before::selection, .tgl-sw *::selection, .tgl-sw *:after::selection, .tgl-sw *:before::selection, .tgl-sw + .btn-switch::selection { background: none; } .tgl-sw + .btn-switch { outline: 0; display: block; width: 4em; height: 2em; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tgl-sw + .btn-switch:after, .tgl-sw + .btn-switch:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .tgl-sw + .btn-switch:after { left: 0; } .tgl-sw + .btn-switch:before { display: none; } .tgl-sw-active + .btn-switch:after { left: 50%; } /* Swipe */ .tgl-sw-swipe + .btn-switch { overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all .2s ease; transition: all .2s ease; border-radius: 3px; font-family: sans-serif; background: #B22222; } .tgl-sw-swipe + .btn-switch:after, .tgl-sw-swipe + .btn-switch:before { display: inline-block; -webkit-transition: all .2s ease; transition: all .2s ease; width: 100%; border-radius: 3px; text-align: center; position: absolute; line-height: 2em; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .tgl-sw-swipe + .btn-switch:after { left: 100%; content: attr(data-tg-on); } .tgl-sw-swipe + .btn-switch:before { left: 0; content: attr(data-tg-off); } .tgl-sw-swipe + .btn-switch:active { background: #B22222; } .tgl-sw-swipe + .btn-switch:active:before { left: -10%; } .tgl-sw-swipe:checked + .btn-switch { background: #4CAF50; } .tgl-sw-swipe:checked + .btn-switch:before { left: -100%; } .tgl-sw-swipe:checked + .btn-switch:after { left: 0; } .tgl-sw-swipe:checked + .btn-switch:active:after { left: 10%; }