awesome checkbox

HTML
<label class="toggle-lbl" for="toggle"> <input class="toggle-input" id="toggle" type="checkbox"/><span class="toggle-btn"></span> </label>
CSS
.toggle-lbl { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .toggle-lbl .toggle-input { display: none; } .toggle-lbl .toggle-input:checked + .toggle-btn { background: #1DA362; } .toggle-lbl .toggle-input:checked + .toggle-btn:before { left: 10px; } .toggle-lbl .toggle-input:checked + .toggle-btn:after { left: 130px; content: 'on'; } .toggle-lbl .toggle-btn { display: inline-block; height: 100px; width: 250px; background: #DD5044; text-align: center; line-height: 80px; color: #DD5044; font-size: 3rem; text-transform: uppercase; border-radius: 50px; } .toggle-lbl .toggle-btn:before { border-radius: 50px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; content: ''; background: #fff; display: inline-block; height: 80px; width: 110px; position: absolute; top: 10px; left: 130px; } .toggle-lbl .toggle-btn:after { content: 'off'; display: inline-block; height: 80px; width: 110px; position: absolute; top: 10px; left: 10px; color: #fff; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /*# sourceMappingURL=style.css.map */
JAVASCRIPT
Expand for more options Login