.button {
  position: relative;
  float:left;
  overflow: hidden;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
.button.raised {
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}
.button.raised:active {
}
.anim {
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
}
.anim:before {
  position: relative;
  content: '';
  display: block;
  margin-top: 100%;
}
.anim:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
}

.clickable .toggle:checked + .anim {
  -moz-animation: anim-in 1.0s;
  -webkit-animation: anim-in 1.0s;
  animation: anim-in 1.0s;
}
.clickable .toggle:checked + .anim:after {
  -moz-animation: anim-in-pseudo 1.0s;
  -webkit-animation: anim-in-pseudo 1.0s;
  animation: anim-in-pseudo 1.0s;
}
.clickable .toggle:not(:checked) + .anim {
  -moz-animation: anim-out 1.0s;
  -webkit-animation: anim-out 1.0s;
  animation: anim-out 1.0s;
}
.clickable .toggle:not(:checked) + .anim:after {
  -moz-animation: anim-out-pseudo 1.0s;
  -webkit-animation: anim-out-pseudo 1.0s;
  animation: anim-out-pseudo 1.0s;
}

.hoverable:hover > .anim {
  -moz-animation: anim-out 1.0s;
  -webkit-animation: anim-out 1.0s;
  animation: anim-out 1.0s;
}
.hoverable:hover > .anim:after {
  -moz-animation: anim-out-pseudo 1.0s;
  -webkit-animation: anim-out-pseudo 1.0s;
  animation: anim-out-pseudo 1.0s;
}
@-webkit-keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes anim-in {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@-moz-keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@-ms-keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@keyframes anim-in-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@-webkit-keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes anim-out {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@-moz-keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@-ms-keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}
@keyframes anim-out-pseudo {
  0% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}