.custom-button {
  --button-radius: 0.3em;
  --button-color: #ffffff;
  --button-outline-color: #cccccc;
  --button-hover-color: #eeeeee;
  --button-text-color: #333333;

  font-size: 1em;
  font-weight: bold;
  border: none;
  cursor: pointer;
  border-radius: var(--button-radius);
  background: var(--button-outline-color);
  position: relative;
  padding: 0;
  outline: none;
  perspective: 1000px;
}

.custom-button .button-top {
  display: block;
  box-sizing: border-box;
  border: 0.125em solid var(--button-outline-color);
  border-radius: var(--button-radius);
  padding: 0.75em 1.5em;
  background: var(--button-color);
  color: var(--button-text-color);
  box-shadow: 0 0.5em 0.75em rgba(0, 0, 0, 0.2);
  transform: translateY(-0.2em);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.custom-button:hover .button-top {
  transform: translateY(-0.5em) rotateX(20deg);
}

.custom-button:active .button-top {
  transform: translateY(-0.1em) rotateX(5deg);
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.15);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}