<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="lang_toggle"> <input class="lagInput" type="checkbox" id="toggle--like" class="toggle--checkbox"> <label class="toggleHeader" for="toggle--like"> <div><img src="https://flagcdn.com/16x12/pk.png" alt=""></div> <div><img src="https://flagcdn.com/16x12/in.png" alt=""></div> </label> </div> </div> </div>

.toggleHeader { display: flex; border: 2px solid #F47920; border-radius: 25px; align-items: center; position: relative; cursor: pointer; } .lang_toggle input{ position: absolute; opacity: 0; } .toggleHeader div{ width: 50%; border-radius: 25px; padding: 1px 6px; } .toggleHeader img{ width: 24px; position: relative; top: -2px; } .toggleHeader div:first-child:before{ content: ""; height: 114%; width: 55%; border: 2px solid #F47920; position: absolute; right: -2px; top: -2px; border-radius: 50px; transition: 0.3s; transform: translate(0, 0); background: #F1F5F7; } .lagInput:checked ~ .toggleHeader div:first-child:before{ transition: 0.3s; transform: translate(-36px, 0px); } .lang_toggle .langInput{ display: none; }