ホバーで波紋が広がる

  .button {
    position: relative;
    display: grid;
    place-content: center;
    width: 150px;
    aspect-ratio: 1;
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .button::before {
    content: "";
    position: absolute;
    inset: -1px;
    width: 150px;
    aspect-ratio: 1;
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 0.7;
    scale: 1;
    transition:
      scale 0.8s ease-out,
      opacity 0.8s ease-out;
  }
  .button:hover::before {
    scale: 1.2;
    opacity: 0;
  }