<div class="card">
  <h2>RADIOSPLOSION</h2>
  <ul>
  <li><input type="radio" id="rad1" name="radios"/>
    <label for="rad1">
      <span class="outer">
        <span class="inner">
        </span>
      </span>
      <p class="inlet"><span class="text__effect">
      EXPLOSIONS
        </span>
      </p>
  </label>
    </li>
   <li><input type="radio" id="rad2" name="radios"/>
    <label for="rad2">
      <span class="outer">
        <span class="inner">
        </span>
      </span>
      <p class="inlet">
        <span class="text__effect">
      IN THE DOM
        </span>
      </p>
     </label></li>
</div>
$accent:#4B6279;
$primary:#87745C;

%glyphcon {
    position: absolute;
    cursor: pointer;
    opacity: 0;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #FFD360;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 600;
  font-size: 1em;
}
h2 {
  position: relative;
  padding-top: 30px;
  color: $accent;
}
ul {
  list-style-type: none;
  position: relative;
}
li {
  display: block;
  height: 50px;
  margin-left:20px;
  text-align: left;
}
.card {
  background: #fff;
  text-align: center;
  width: 300px;
  height: 250px;
  margin: 50px auto;
  box-shadow: 8px 8px 1px 1px $primary;
}

//RADIO BUTTON BEGINS

//-----------------------------------------

//Hides default radio.
input[type="radio"] {
  display: block;
  @extend %glyphcon;
}

//Hover effect for Checkmark.
input[type="radio"]:hover + label .outer .inner:before {
  opacity: .2;
  display: inline-block;
  position: absolute;
  transform: scale(1);
  transition: all .3s ease;
}
//Effect when box is checked.
input[type="radio"]:checked label .inner:before {
  opacity: 1;
  transform: scale(1.5);
  transition: all .2s ease;
}
//Effect when box is checked.
input[type="radio"]:focus + label .outer .inner:before {
  opacity: 1;
  transform: scale(1.5);
  transition: all .3s ease;
  -webkit-transition-delay: .75s;
}
//Color change and ripple animation around checkbox.
input[type="radio"]:focus + label .outer {
  transform: translate(0.09em, 0.09em);
  box-shadow: 0px 0px 0px 0px rgba(200, 200, 200, 0.1);
  border: 3px solid $accent;
  -webkit-transition-delay: .75s;
  -webkit-animation: boom 1s ease-out;
  -webkit-animation-delay: .75s;
}
//Text color change and underline when clicked.
input[type="radio"]:focus + label .inlet .text__effect {
  transition: all .2s ease-out;
  -webkit-transition-delay: .75s;
  color:$accent;
  border-bottom:1px solid $accent;
  border-bottom-height:20px;
}
//Adds pointer cursor to text when hovered.
input[type="radio"] + label .inlet .text__effect {
  cursor:pointer;
}
//Sends paperplane into button.
input[type="radio"]:focus + label .outer .inner:after {
  opacity: 1;
  -webkit-transform: translate(140px, -150px) scale(.01);
  transition: all 1s ease;
}
//Checkbox circle.
.outer {
  width: 30px;
  height: 30px;
  border: 3px solid $primary;
  position: relative;
  display: inline-block;
  background: transparent;
  margin: 25px 20px 0 30px;
  border-radius: 50%;
  cursor: pointer;
  top: 0;
  & .inner:before:hover {
    opacity: 1;
  }
}
//Checkmark & paperplane.
.inner {
  position: relative;
  font-family: FontAwesome;
  //Checkmark.
  &:before {
    content: "\f00c";
    @extend %glyphcon;
    top: 50%;
    left: 7px;
    color: $accent;
    transform: scale(0) translateY(-50%);
  }
  //Paperplane.
  &:after {
    content: '\f1d9';
    @extend %glyphcon;
    left: -140px;
    bottom: -180px;
    font-size: 2em;
    transform: scale(3);
    color: $accent;
  }
}
//Label text. Wrapped in span to control border-bottom.
.inlet {
  position: relative;
  top: -27px;
  left: 80px;
  color: $primary;
}

//Animation.
@keyframes boom {
  0% {
    box-shadow: 0px 0px 0px 15px rgba(100, 100, 100, 0.25);
    100% {
      box-shadow: 0px 0px 0px 15px rgba(100, 100, 100, 0.0);
    }
  }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.