.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); } <a href="#" class="ctc-stack">DESIGN</a>
Live preview Edit any tab — preview updates live Ready