<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 wrapper"> <div class="row"> <div class="col-lg-8 offset-lg-1 form-group"> <div class="input-group toggle_radio"> <input type="radio" checked class="toggle_option" id="first_toggle" name="toggle_option"> <input type="radio" class="toggle_option" id="second_toggle" name="toggle_option"> <label for="first_toggle"><img src="http://icons-for-free.com/free-icons/png/512/2754579.png" class="mb-2" width="200"><h3>Soy Independiente</h3></label> <label for="second_toggle"><img src="https://cdn0.iconfinder.com/data/icons/business-381/500/business-work_11-512.png" class="mb-2" width="200"><h3>Soy Empresa</h3></label> <div class="toggle_option_slider shadow"> </div> </div> </div> </div>

.wrapper{ padding-top:100px; padding-bottom: 100px; } .toggle_radio{ background: rgba(255, 193, 10, 0.6); border-radius: 6px; padding: 30px 0!important; position: relative; width: 100%; } .toggle_radio > * { float: left; } .toggle_radio input[type=radio]{ display: none; } .toggle_radio label{ color: #333; display: block; width: 50%; cursor: pointer; text-align: center; margin-bottom: 0; z-index: 1; } .toggle_option_slider{ width: 50%; border-radius: 6px; position: absolute; top: 0; bottom: 0; z-index: 0; -webkit-transition: all 400ms ease-out 200ms; transition: all 400ms ease-out 200ms; } #first_toggle:checked ~ .toggle_option_slider{ background: rgba(255, 193, 6, 0.8); left: 0; } #second_toggle:checked ~ .toggle_option_slider{ background: rgba(255, 193, 6, 0.8); left: 50%; }