.bubbles {
  --c1: #212121; /* Recommendation: same background color */
  --c2: #8685ef;
  --size-letter: 32px;
  padding: 0.5em 1em;
  font-size: var(--size-letter);

  background-color: transparent;
  border: calc(var(--size-letter) / 6) solid var(--c2);
  border-radius: 0.2em;
  cursor: pointer;

  overflow: hidden;
  position: relative;
  transition: 300ms cubic-bezier(0.83, 0, 0.17, 1);
}

.bubbles > .text {
  font-weight: 700;
  color: var(--c2);
  position: relative;
  z-index: 1;
  transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1);
}

.bubbles::before {
  top: 0;
  left: 0;
}

.bubbles::after {
  top: 100%;
  left: 100%;
}

.bubbles::before,
.bubbles::after {
  content: "";
  width: 150%;
  aspect-ratio: 1/1;
  scale: 0;
  transition: 1000ms cubic-bezier(0.76, 0, 0.24, 1);

  background-color: var(--c2);
  border-radius: 50%;

  position: absolute;
  translate: -50% -50%;
}

.bubbles:hover {
  & > span {
    color: var(--c1);
  }
  &::before,
  &::after {
    scale: 1;
  }
}

.bubbles:active {
  scale: 0.98;
  filter: brightness(0.9);
}