<div class="center"> <input type="checkbox"> </div>
.center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } input { &[type="checkbox"] { position: relative; width: 80px; height: 40px; background: #f7cfc6; outline: none; border-radius: 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; &:before { content: ''; position: absolute; width: 32px; height: 32px; border-radius: 20px; top: 4px; left: 4px; background: #eb9c85; z-index: 2; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; transition: .2s; } &:after { content: 'off'; font-size: 16px; color: #902e12; position: absolute; top: 10px; right: 15px; z-index: 1; } &:checked { background: #cfe8d6; &:before { left: 44px; background: #92c7a3; } &:after { content: 'on'; color: #2a7e43; top: 10px; right: auto; left: 17px; } } } }