Custom CSS Radio button

by James Connolly

HTML

<div class="radio-button">
  <input id="chkTest" type="radio" name="testRadio" />
  <br />
  <label for="chkTest">Male</label>
</div>

<div class="radio-button">
  <input id="chkTest1" type="radio" name="testRadio" checked/>
  <br >
  <label for="chkTest1">Female</label>
</div>
<div class="space"></div>
<div class="radio-button radio-blue radio-square">
  <input id="chkTest2" type="radio" name="testRadio1" />
  <label for="chkTest2">Male</label>
</div>

<div class="radio-button radio-blue radio-square">
  <input id="chkTest3" type="radio" name="testRadio1" checked/>
  <label for="chkTest3">Female</label>
</div>

<div class="space"></div>
<div class="radio-button radio-blue radio-rounded">
  <input id="chkTest4" type="radio" name="testRadio2" />
  <label for="chkTest4">Male</label>
</div>

<div class="radio-button radio-blue radio-rounded">
  <input id="chkTest5" type="radio" name="testRadio2" checked/>
  <label for="chkTest5">Female</label>
</div>

CSS

body{
  font-family:'segoe ui';
  background-color:white;
}
.space{
  height:10px;
}

.radio-button * {
  box-sizing: border-box;
}

.radio-button {
  display: inline-block;
}

.radio-button > input {
  display: none;
}

.radio-button > label {
  vertical-align: top;
  font-size: 18px;
}

.radio-button > [type="radio"] + label:before {
  color: #777;
  content: '';
  display: inline-block;
  min-height: 20px;
  height: 20px;
  width: 20px;
  border: 2px solid #777;
  border-radius: 100%;
  margin-right: 3px;
  font-size: 15px;
  vertical-align: top;
  text-align: center;
  transition: all 0.3s linear;
  content: '';
}

.radio-button.radio-square > [type="radio"] + label:before{
  border-radius:0px;
}

.radio-button.radio-rounded > [type="radio"] + label:before{
  border-radius:25%;
}


.radio-button.radio-blue > [type="radio"] + label:before{
  border: 2px solid #ccc;
}

.radio-button > [type="radio"]:not(:checked) + label:before {
  background-color: transparent;
}

.radio-button > [type="radio"]:not(:checked) + label:hover:before {
  background: -moz-radial-gradient(center, ellipse cover, rgba(124, 188, 10, 0.7) 0%, rgba(157, 213, 58, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, rgba(124, 188, 10, 0.7) 0%, rgba(157, 213, 58, 0) 100%);
  background: radial-gradient(ellipse at center, rgba(124, 188, 10, 0.7) 0%, rgba(157, 213, 58, 0) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b37cbc0a', endColorstr='#009dd53a', GradientType=1);
}

.radio-button > [type="radio"]:checked + label:before {
  background: -moz-radial-gradient(center, ellipse cover, rgba(124, 188, 10, 1) 0%, rgba(128, 194, 23, 1) 49%, rgba(161, 213, 79, 1) 50%, rgba(161, 213, 78, 1) 53%, rgba(157, 213, 58, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, rgba(124, 188, 10, 1) 0%, rgba(128, 194, 23, 1) 49%, rgba(161, 213, 79, 1) 50%, rgba(161, 213, 78, 1) 53%, rgba(157, 213, 58, 0) 100%);
  background:...