<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: #ccc; outline: none; border-radius: 20px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.2); -moz-box-shadow: inset 0 0 5px rgba(0,0,0,.2); box-shadow: inset 0 0 5px rgba(0,0,0,.2); -webkit-appearance: none; -moz-appearance: none; appearance: none; &:before { content: ''; position: absolute; width: 40px; height: 40px; border-radius: 20px; top: 0; left: 0; background: #fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } &:checked { background: #03a9f4; &:before { left: 40px; } } } }