Radio buttons look like buttons centered text using divs

by Josh Weir

HTML

<div class="donate-now">
<div class="t2">
    <div class="t">
    <label for="a25">$25
    <input type="radio" id="a25" name="amount" />
    </label>
    </div>
</div>
<div class="t2">
    <div class="t">
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
    </div>
</div>
</div>

CSS

.donate-now {
     /*list-style-type:none;*/
     margin:25px 0 0 0;
     padding:0;
}

.donate-now div {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}


.donate-now label, .donate-now input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    text-align: center;
}

.donate-now input[type="radio"] {
    opacity:0.011;
    z-index:100;
}


.donate-now input[type="radio"]:checked + label {
    background:yellow;
}

.t2 {
    border:1px solid #CCC;
}

.t2:hover {
     background:#DDD;
}
    
.t {
    top: 50%;
  transform: translateY(-25%);
  position: absolute;
}

.donate-now label {
      
     cursor:pointer;
    z-index:90;
}

JavaScript

$('.donate-now input').on('change', function() {
    $("div.t2").has("label").has("input[name='amount']:checked").css("background","yellow");
    
$("div.t2").has("label").has("input[name='amount']:not(:checked)").css("background","");
    
    
});