Making radio buttons look like buttons and getting radio and label value

Hello

Making radio buttons look like buttons and getting radio and label value

if getting label value then please replace this css

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
    height:100%;
    width:100%;
}

to

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
   }
<script>

$(document).ready(function(e) {


// Get Value Using Label
$('.hour').click(function(){
//alert('hi');

var lable_value = $(this).attr('month');

alert(lable_value);

});

//Get Value using Radio Button

$('input[name="hours"]:radio').click(function(){


radio_value = $(this).val();

alert(radio_value);
});
       
    });
</script>


<ul class="donate-now">
<li>
    <input type="radio" name="hours" value="1" >
    <label class='hour' for="hour" month='hour'>hour</label>
</li>
<li>
    <input type="radio" name="hours" value="4" >
    <label class='hour' for="4hour"  month='4hour'>4hour</label>
</li>
<li>
    <input type="radio" name="hours" value="8" >
    <label class='hour' for="8hour"  month='8hour'>8hour</label>
</li>
<li>
    <input type="radio" name="hours" value="24" >
    <label class='hour' for="24hour"  month='3days'>24hour</label>
</li>

<li>
    <input type="radio" name="hours" value="3" >
    <label class='hour' for="3days"  month='3days'>3days</label>
</li>

<li>
    <input type="radio" name="hours" value="all" >
    <label class='hour' for="all"  month='all'>all</label>
</li>

</ul>

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

.donate-now li {
     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;
}

.donate-now input[type="radio"] {
    opacity:0.01;
    z-index:100;
height:100%;
width:100%;
}

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

.donate-now label {
     padding:5px;
     border:1px solid #CCC;
     cursor:pointer;
    z-index:90;
}

.donate-now label:hover {
     background:#DDD;
}
</style>

Tweet