<a href="#" class="ctc-stack">DESIGN</a>

.ctc-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: #ff6c8a;
  color: #0a0a0a;
  border-radius: 4px;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform 0.3s ease;
  z-index: 3;
}

.ctc-stack::before,
.ctc-stack::after {
  content: "DESIGN";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.ctc-stack::before {
  background: #f5a84a;
  transform: translate(2px, 2px);
  z-index: -1;
  color: transparent;
}

.ctc-stack::after {
  background: #2eb88a;
  transform: translate(4px, 4px);
  z-index: -2;
  color: transparent;
}

.ctc-stack:hover {
  transform: translate(-2px, -2px);
}

.ctc-stack:hover::before {
  transform: translate(4px, 4px);
}

.ctc-stack:hover::after {
  transform: translate(8px, 8px);
}