<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"> <h2 class="pt-5">Hi, I'm Custom Radio Button Dattebayou!!</h2> <div class="radio-toolbar pt-4"> <input type="radio" id="radioHarta" name="radioCustom" value="Harta" checked> <label for="radioHarta">Harta</label> <input type="radio" id="radioTahta" name="radioCustom" value="Tahta"> <label for="radioTahta">Tahta</label> <input type="radio" id="radioGacha" name="radioCustom" value="Gacha"> <label for="radioGacha">Gacha</label> </div> </div>

.container { text-align: center; } .radio-toolbar { margin: 10px; } .radio-toolbar input[type="radio"] { opacity: 0; position: fixed; width: 0; } .radio-toolbar label { display: inline-block; color: #fff; background-color: #28666E; border: 2px solid #28666E; border-radius: 4px; padding: 10px 20px; font-family: sans-serif, Arial; font-size: 16px; cursor: pointer; } .radio-toolbar label:hover { color: #000; background-color: #FEDC97; border-color: #FEDC97; } .radio-toolbar input[type="radio"]:checked + label { background-color: #033f63; border-color: #033f63; } .radio-toolbar input[type="radio"]:checked + label:hover { color: #FEDC97; }