RadioButtons to list

by oterox

HTML

<ul class="donate-now">
<li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">25</label>
</li>
<li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">50</label>
</li>
<li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">75</label>
</li>
<li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">100</label>
</li>

</ul>

CSS

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

.donate-now li {
     float:left;
     margin:0 5px 0 0;
     text-align: center;
    width:50px;
    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.011;
    z-index:100;
}

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

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

.donate-now label:hover {
     background:#DDD;
}