<div class="wrapper">
  <div class="toggle_radio">
    <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
    <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option">
    <input type="radio" class="toggle_option" id="third_toggle" name="toggle_option">
    <label for="first_toggle">
      <span class="description">TODAY</span>
        <p class="day">3 </p>
      <span class="day-week">Tuesday</span>
    </label>
    <label for="second_toggle">
      <span class="description">TOMORROW</span>
        <p class="day">4 </p>
      <span class="day-week">Wednesday</span>
    </label>
    <label for="third_toggle">
      <span class="description">DAY AFTER</span>
        <p class="day">5 </p>
      <span class="day-week">Thursday</span>
    </label>
    <div class="toggle_option_slider">
    </div>
  </div>

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
*{
  margin:0px;
  padding:0px;
}
html{
  background: #667;
}
.wrapper {
  margin: 100px 0;
}
.toggle_radio{
  position: relative;
  background: rgba(255,255,255,.1);
  margin: 4px auto;
  overflow: hidden;
  padding: 0 !important;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 5px;
  position: relative;
  height: 100px;
  width: 318px;
}
.toggle_radio > * {
  float: left;
}
.toggle_radio input[type=radio]{
  display: none;
/*   position: fixed; */
}
.toggle_radio label{
  font: 90%/1.618 "Lato";
  color: rgba(0,0,0,.9);
  z-index: 0;
  display: block;
  width: 100px;
  height: 100px;
  margin: 3px 3px;
  font-family: "Lato";
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 1;
/*   line-height:100px; */
  /*background: rgba(0,0,0,.1);*/
  text-align: center;
  /*margin: 0 2px;*/
  /*background: blue;*/ /*make it blue*/
}
.toggle_option_slider{
  /*display: none;*/
  /*background: red;*/
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
}

#first_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 0px;
}
#second_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 109px;
}
#third_toggle:checked ~ .toggle_option_slider{
  background: rgba(255,255,255,.3);
  left: 218px;
}

span.description{
  top:0px;
}

p.day {
    line-height: 50px;
    font-size: 2em;
}