ホバー時とフォーカス時で挙動が変わるボタン

マウスでホバーしたときとtabボタンでフォーカスしたときのアニメーションを個別に設定しています。
フォーカス中はどこに当たっているかわかりにくいため、常に動くようなアニメを取り入れています。

.btn {
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    z-index: 0;
    background-color: #5851ec;
    transform: translate(-50%, -50%) scale(0);
    transition: all .3s ease-in;
  }


  &:hover span, &:focus span {
    color: #fff;
  }
  &:hover::before {
    transform: translate(-50%, -50%) scale(1);
  }


  &:focus::before {
    animation: anime 1.2s infinite;
    @keyframes anime {
      0% {
      transform: translate(-50%, -50%) scale(0);
      }
      50% {
        transform: translate(-50%, -50%) scale(.8);
      }
      100% {
        transform: translate(-50%, -50%) scale(0);
      }
    }
  }
  
}