JSFiddle - React, Tailwind, and code Playground
HTML
<form action="http://jsfiddle.net/echo/jsonp/" method="GET">
<div class="radio">
<label for="radio_1">
<button type="submit" class="transparent" name="radio" value="1"></button>
<input type="radio" value="1" name="radio" id="radio_1"/>
Radio 1</label>
</div>
<div class="radio">
<label for="radio_2">
<button type="submit" class="transparent" name="radio" value="2"></button>
<input type="radio" value="2" name="radio" id="radio_2"/>
Radio 2</label>
</div>
</form>
CSS
button.transparent{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
visiblity:hidden;
border:none;
z-index:2;
background-color:transparent;
width:100%;
}
div.radio{
position:relative;
}
div.radio > label{
position: relative;
display:block;
}
div.radio > label > input[type="radio"]{
position:relative;
z-index:1;
}