<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="paymentCont"> <div class="headingWrap"> <h3 class="headingTop text-center">Select Your Shipping Method</h3> </div> <div class="paymentWrap"> <div class="btn-group paymentBtnGroup btn-group-justified" data-toggle="buttons"> <label class="btn paymentMethod active"> <div class="method visa">Kargo tipi:1</div> <input type="radio" name="options" checked> </label> <label class="btn paymentMethod"> <div class="method master-card">Kargo tipi:2</div> <input type="radio" name="options"> </label> <label class="btn paymentMethod"> <div class="method amex">Kargo tipi:3</div> <input type="radio" name="options"> </label> </div> </div> </div> </div> </div>

.paymentWrap { padding: 50px; } .paymentWrap .paymentBtnGroup { max-width: 800px; margin: auto; } .paymentWrap .paymentBtnGroup .paymentMethod { padding: 40px; box-shadow: none; position: relative; } .paymentWrap .paymentBtnGroup .paymentMethod.active { outline: none !important; } .paymentWrap .paymentBtnGroup .paymentMethod.active .method { border-color: #4cd264; outline: none !important; box-shadow: 0px 3px 22px 0px #7b7b7b; } .paymentWrap .paymentBtnGroup .paymentMethod .method { position: absolute; right: 3px; top: 3px; bottom: 3px; left: 3px; background-size: contain; background-position: center; background-repeat: no-repeat; border: 2px solid transparent; transition: all 0.5s; } .paymentWrap .paymentBtnGroup .paymentMethod .method.visa { } .paymentWrap .paymentBtnGroup .paymentMethod .method.master-card { } .paymentWrap .paymentBtnGroup .paymentMethod .method.amex { } .paymentWrap .paymentBtnGroup .paymentMethod .method:hover { border-color: #4cd264; outline: none !important; }