form.css

body {
  background:#efefef;
}
form {
  padding:30px;
  border-radius:3px;
  margin:50px auto;
  width:150px;
  background:#fff;
  border-top:6px solid #ec1d3d;
}

.radioP {
  display: block;
  position: relative;
  margin: 20px 0;
  padding-left:40px;
  
  font-family:arial;
}
.radioP:first-child {
 margin:0 0 20px 0; 
}

input[type="radio"] {
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}

/* For IE 7-8-9

input[type="radio"] {
  display: inline-block;
}
input[type="radio"] + label span.radioButtonDesign {
  display: none;
}

*/

input[type="radio"] + label span.radioButtonDesign {
  appearance: none;
  z-index: 20;
  position: absolute;
  top:-3px;
  left:0;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;

  background: #efefef;
  background-image: radial-gradient(ellipse at center,  #ec1d3d 0%,#ec1d3d 40%,#efefef 45%);
  background-repeat: no-repeat;

  transition: background-position .15s cubic-bezier(.8, 0, 1, 1);
}
input[type="radio"]:checked + label span.radioButtonDesign {
  transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1);
}

input[type="radio"] + label span.radioButtonDesign {
  background-position: -24px 0;
}
input[type="radio"]:checked + label span.radioButtonDesign {
  background-position: 0 0;
}

input[type="submit"] {
  border:none;
  background:#ec1d3d;
  color:#fff;
  font-size:20px;
  padding:10px 0;
  border-radius:3px;
  cursor:pointer;
  width:100%;
}
input[type="submit"]:hover {opacity:.8;}
input[type="submit"]:active {opacity:1;}

form.html

<form>
<p class="radioP">
  <input type="radio" name="name" id="male" required />
  <label for="male">
    <span class="radioButtonDesign"></span>
    Male
  </label>
</p>
<p class="radioP">
  <input type="radio" name="name" id="female" required />
  <label for="female">
    <span class="radioButtonDesign"></span>
    Female
  </label>
</p>
<p class="radioP">
  <input type="radio" name="name" id="other" required />
  <label for="other">
    <span class="radioButtonDesign"></span>
Other
  </label>
</p>

<p>
  <input type="submit" value="submit">
</p>
</form>