Back to CSS Tags & Chips Stack of Three Pure CSS
Share
.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