<div class="radio-wrapper">
<p>GENDER</p>
<div class="radio-container">
    <input checked="checked" type="radio" name="gender" value="1" id="male" />
    <label for="male">MALE</label>
    <input type="radio" name="gender" value="0" id="female" />
    <label for="female">FEMALE</label>
</div>
</div> 

div.radio-wrapper {
  text-align: center;
  font-size: 1.2em;
  font-weight: bolder;
  color: deeppink;
}

div.radio-container {
  background-color: deeppink;
  display: inline-block;
  border: 2px solid deeppink;
}

div.radio-container input[type=radio] {
  opacity: 0;
  display: none;
  margin: 0;
  outline: none;
}

div.radio-container input[type="radio"]:checked+label {
  background-color: deeppink;
  color: white;
  animation-name: radio-active;
  animation-duration: 0.2s;
}

@keyframes radio-active {
  from {
      transform: scale(0.6, 0.6);
  }
  to {
      transform: scale(1, 1);
  }
}

div.radio-container label {
  padding: 0.8em;
  cursor: pointer;
  background: none;
  display: inline-block;
  outline: none;
  letter-spacing: 0.1em;
  background-color: white;
  color: black;
  transition: all ease-in-out 0.1s;
}