<div class="wrap">
  <input type="radio" id="rad1" name="rads">
  <label for="rad1"></label>
  <input type="radio" id="rad2" name="rads" >
  <label for="rad2"></label>
  <input type="radio" id="rad3" name="rads">
  <label for="rad3"></label>
</div>

body {
  background: #75FF75;
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

input {
  display: none;
}

label {
  cursor: pointer;
  margin: 10px 10px;
}

label:before {
  content: '';
  display: inline-block;
  height: 30px;
  width: 30px;
  background: #59CA59;
  border-radius: 50%;
  z-index: 2;
  transition: box-shadow .4s ease,
          background .3s ease;
}

input:checked + label:before {
  box-shadow: inset 0px 3px 0 2px rgba(89,202,89,1);
  background: #fff;
}