<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="chiller_cb"> <input id="myCheckbox" type="checkbox"> <label for="myCheckbox">Checkbox checked</label> <span></span> </div> </div> </div>

.span_pseudo, .chiller_cb span:before, .chiller_cb span:after { position: absolute; display: inline-block; width: 0; height: 2rem; margin-left: 5px; content: ''; -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #fff; } .chiller_cb { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 200px; border-radius: 3px; background-color: #8f49fa; height: 2rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .chiller_cb input { display: none; } .chiller_cb input:checked ~ span { border-color: #8f49fa; background: #8f49fa; } .chiller_cb input:checked ~ span:before { width: 1rem; height: .15rem; -webkit-transition: width .1s; transition: width .1s; -webkit-transition-delay: .3s; transition-delay: .3s; } .chiller_cb input:checked ~ span:after { width: .4rem; height: .15rem; -webkit-transition: width .1s; transition: width .1s; -webkit-transition-delay: .2s; transition-delay: .2s; } .chiller_cb input:disabled ~ span { border-color: #8f49fa; background: #8f49fa; } .chiller_cb input:disabled ~ label { color: #8f49fa; } .chiller_cb input:disabled ~ label:hover { cursor: default; } .chiller_cb label { position: relative; z-index: 2; margin-bottom: 0; padding-left: 2rem; cursor: pointer; color: #fff; } .chiller_cb span { position: absolute; z-index: 1; left: 0; display: inline-block; -webkit-box-sizing: content-box; box-sizing: content-box; width: 1.2rem; height: 1.2rem; -webkit-transition: all .2s; transition: all .2s; border: 2px solid #8f49fa; background: #8f49fa; } .chiller_cb span:before { top: 1rem; left: .37rem; -webkit-transform: rotate(-55deg); transform: rotate(-55deg); } .chiller_cb span:after { bottom: .35rem; left: .2rem; -webkit-transform: rotate(35deg); transform: rotate(35deg); } /*scss .span_pseudo, .chiller_cb span:before, .chiller_cb span:after { position: absolute; display: inline-block; width: 0; height: 2rem; margin-left: 5px; content: ''; transform-origin: 0 0; background: $laptop-section-text-c; } .chiller_cb { position: relative; display: inline-flex; width: 200px; border-radius: 3px; background-color: $carousel-button-c; height: 2rem; align-items: center; input { display: none; &:checked ~ span { border-color: $carousel-button-c; background: $carousel-button-c; &:before { width: 1rem; height: .15rem; transition: width .1s; transition-delay: .3s; } &:after { width: .4rem; height: .15rem; transition: width .1s; transition-delay: .2s; } } &:disabled ~ span { border-color: $carousel-button-c; background: $carousel-button-c; } &:disabled ~ label { color: $carousel-button-c; &:hover { cursor: default; } } } label { position: relative; z-index: 2; margin-bottom: 0; padding-left: 2rem; cursor: pointer; color: $laptop-section-text-c; } span { position: absolute; z-index: 1; left: 0; display: inline-block; box-sizing: content-box; width: 1.2rem; height: 1.2rem; transition: all .2s; border: 2px solid $carousel-button-c; background: $carousel-button-c; &:before { top: 1rem; left: .37rem; transform: rotate(-55deg); } &:after { bottom: .35rem; left: .2rem; transform: rotate(35deg); } } } */