Tappable radio buttons

by jorgeluis

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="radioset">
	
	<label class="btn btn-light btn-radio">
		<input type="radio" name="opt" id="val1" value="1">
		<span>Option1</span>
	</label>
	
	<label class="btn btn-light btn-radio">
		<input type="radio" name="opt" id="val2" value="2">
		<span>Option2</span>
	</label>
	
	<label class="btn btn-light btn-radio">
		<input type="radio" name="opt" id="val3" value="3">
		<span>Option3</span>
	</label>
	
</div>
        
<p>This is a demo for displaying regular radio buttons with button-like states and touch-screen ready tap-targets (40px here). The html includes only an extra span, and requires that the radio input be wrapped by it's label.</p>

        <p>This can be taken a lot further by styling the input itself but that's up to the designer. </p>
        
        <p>It uses a next sibling selector for the selected state, which is not supported in IE7 or earlier.</p>

CSS

.btn-radio {
  padding: 0; /* padding on span instead */
}
.btn span {
    display: inline-block;
    line-height: 40px;
    padding: 0 2rem;
    min-height: 40px;
    border-radius: .25rem;
    border: solid 1px transparent;
}

.btn span:hover {
    background-color: --gray;
}

/* hide the button itself */
.btn input[type="radio"] {
    position: absolute;
    font-size: 0;
    opacity: 0;
}

.btn input[type="radio"]:checked + span {
    background-color: #dae0e5;
    border-color: #dae0e5;
    color: #222;
}