<ul class="type">
<li>
    <input type="radio" id="Print" name="bookType" />
    <label for="Print">Print<span>$12</span></label>
</li>
<li>
    <input type="radio" id="eBook" name="bookType" />
    <label for="eBook">eBook<span>$10</span></label>
</li>
<li>
    <input type="radio" id="both" name="bookType" checked="checked"/>
    <label for="both">Print/eBook<span>$20</span></label>
</li>
</ul>
.type {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}

.type li {
    float:left;
    margin:0 15px 0 0;
    width:100px;
    height:3em;
    position:relative;
}

.type label, .type input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.type input[type="radio"] {
    opacity:0.011;
    z-index:100;
}
.type label {
     font-size: 90%;
     background: transparent;
     padding:8px;
     border:1px solid #CCC; 
     cursor:pointer;
     z-index:90;
     text-align: center;
}
.type label span { display:table; width: 100%; margin: 0; text-align: center;}

.type label:hover {
     background:#DDD;
}
.type input[type="radio"]:checked + label {
    border: 1px solid red; font-weight: bold;
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.