<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 ----------> <label class="toggle-label"> <input type="checkbox"> <span class="back"> <span class="toggle"></span> <span class="label on">I WANT TO LEARN</span> <span class="label off">I WANT TO TECH</span> </span> </label>

/*switch on-off */ .toggle-label { position: relative; width: 300px; height: 30px; margin-top: 10px; } .toggle-label input[type=checkbox] { opacity: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .toggle-label input[type=checkbox]+.back { position: absolute; width: 100%; height: 30px; left: 0; top: 0; border-radius: 50px; border: 1px solid #000; transition: background 150ms linear; } .toggle-label input[type=checkbox]:checked+.back { border: 1px solid #000; cursor: pointer; } .toggle-label input[type=checkbox]+.back .toggle { display: block; position: absolute; content: ' '; background: #000; width: 50%; height: 100%; transition: margin 150ms linear; border: 1px solid #808080; border-radius: 50px; } .toggle-label input[type=checkbox]:checked+.back .toggle { margin-left: 150px; } .toggle-label .label { display: block; position: absolute; width: 50%; color: #ddd; line-height: 24px; text-align: center; font-size: 10px; } .toggle-label .label.on { left: 0px; } .toggle-label .label.off { right: 0px; } .toggle-label input[type=checkbox]:checked+.back .label.on { color: #000; } .toggle-label input[type=checkbox]+.back .label.off { color: #000; cursor: pointer; } .toggle-label input[type=checkbox]:checked+.back .label.off { color: #ddd; } /*switch on-off */