.ui-btn {

  --btn-default-bg: rgba(0, 0, 0, .85);

  --btn-padding: 15px 28px;

  --btn-hover-bg: rgba(15, 15, 15, .95);

  --btn-transition: .3s;

  --btn-letter-spacing: .25rem;

  --btn-animation-duration: 1.2s;

  --btn-shadow-color: rgba(212,175,55,.25);

  --hover-btn-color: #d4af37;

  --default-btn-color: #3d3535;

  --font-size: 16px;

  --font-weight: 600;

  --font-family: Menlo, Roboto Mono, monospace;
}


/* ====================================
   BUTTON
==================================== */

.ui-btn {

  box-sizing: border-box;

  padding: var(--btn-padding);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--default-btn-color);

  font: var(--font-weight) var(--font-size) var(--font-family);

  background: var(--btn-default-bg);

  border: 1px solid rgba(212,175,55,.4);

  cursor: pointer;

  transition: var(--btn-transition);

  overflow: hidden;

  letter-spacing: 3px;

  text-transform: uppercase;

  backdrop-filter: blur(10px);

  box-shadow:
  0 0 10px rgba(212,175,55,.2),
  0 0 25px rgba(212,175,55,.08);
}

.ui-btn:hover {

  background: var(--btn-hover-bg);

  transform: translateY(-2px);

  box-shadow:
  0 0 15px rgba(212,175,55,.45),
  0 0 40px rgba(212,175,55,.15);
}

.ui-btn span {

  letter-spacing: var(--btn-letter-spacing);

  transition: var(--btn-transition);

  box-sizing: border-box;

  position: relative;

  background: inherit;
}

.ui-btn span::before {

  box-sizing: border-box;

  position: absolute;

  content: "";

  background: inherit;
}

.ui-btn:hover span,
.ui-btn:focus span {

  color: var(--hover-btn-color);
}

.ui-btn:hover span::before,
.ui-btn:focus span::before {

  animation: chitchat linear both var(--btn-animation-duration);
}


/* ====================================
   GLITCH ANIMATION
==================================== */

@keyframes chitchat {

  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}