@property --progress {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.card-button {
    position: relative;

    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(0) rotateX(0) scale(1);

    margin: 4px;

    height: 100%;

    --progress: 0;
    transition: --progress 0.5s;
  }
  .card-button:hover {
    --progress: 1;
    transform: perspective(1000px) rotateY(var(--rotationX)) rotateX(var(--rotationY)) scale(calc(1 + var(--progress)*0.1));
  }
  .card-button:not(:hover) {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .card-button > .card-button-icon {
    transition: 0.4s;
  }
  .card-button:hover > .card-button-icon {
    filter: brightness(125%);
    transition: 0.4s;
  }

  .card-button:active {
    transform: scale(0.95);

    transition: 0.3s;
  }
  .card-button:active > .card-button-icon {
    filter: brightness(150%);
    transition: 0.4s;
  }

  .card-button-shadow {
    position: absolute;

    top: 0;
    left: 0;

    filter: brightness(0%);
    transform: translateZ(-15px);

    z-index: -1;
  }
  .card-button-overlay {
    position: absolute;

    top: 0;
    left: 0;

    filter: brightness(100%);

    mask-image: radial-gradient(circle at var(--x) var(--y), rgb(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 65%);

    z-index: 1;

    transition: filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .card-button:hover > .card-button-overlay {
    filter: brightness(250%);

    mask-image: radial-gradient(circle at var(--x) var(--y), rgb(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 65%);

    transition: filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  }