.btn {
    background: #fff;
    border-radius: 0.25em;
    text-align: center;
    margin: 1.6rem;
    font-size: 0.75rem;
    border: none;
    padding: 0.5em;
    position: relative;
    outline: none;
    white-space: nowrap;
    letter-spacing: 0.25em;
  }
  
  .btn--shockwave.is-active {
    -webkit-animation: shockwaveJump 2.5s ease-out infinite;
            animation: shockwaveJump 2.5s ease-out infinite;
  }
  .btn--shockwave.is-active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 0.25em;
    -webkit-animation: shockwave 2s 1.3s ease-out infinite;
            animation: shockwave 2s 1.3s ease-out infinite;
  }
  .btn--shockwave.is-active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 0.25em;
    -webkit-animation: shockwave 2s 2s ease-out infinite;
            animation: shockwave 2s 2s ease-out infinite;
  }
  
  @-webkit-keyframes shockwaveJump {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.08);
    }
    50% {
      transform: scale(0.98);
    }
    55% {
      transform: scale(1.02);
    }
    60% {
      transform: scale(0.98);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes shockwaveJump {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.08);
    }
    50% {
      transform: scale(0.98);
    }
    55% {
      transform: scale(1.02);
    }
    60% {
      transform: scale(0.98);
    }
    100% {
      transform: scale(1);
    }
  }
  @-webkit-keyframes shockwave {
    0% {
      transform: scale(1);
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15);
    }
    95% {
      box-shadow: 0 0 50px rgba(0, 0, 0, 0), inset 0 0 30px rgba(0, 0, 0, 0);
    }
    100% {
      transform: scale(1.125);
    }
  }
  @keyframes shockwave {
    0% {
      transform: scale(1);
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.15);
    }
    95% {
      box-shadow: 0 0 50px rgba(0, 0, 0, 0), inset 0 0 30px rgba(0, 0, 0, 0);
    }
    100% {
      transform: scale(1.125);
    }
  }
  .btn--jump.is-active {
    -webkit-animation: 1.6s jump ease infinite alternate;
            animation: 1.6s jump ease infinite alternate;
  }
  
  @-webkit-keyframes jump {
    0% {
      transform: scale(1);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    100% {
      transform: scale(1.05);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
  }