Stacked Layer Unfold Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="stack-card-536"><div class="layer l3"></div><div class="layer l2"></div><div class="layer l1">Hover Stack</div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.stack-card-536 { position: relative; width: 160px; height: 100px; cursor: pointer; font-family: system-ui, sans-serif; margin: auto; }
.stack-card-536 .layer { position: absolute; inset: 0; border-radius: 14px; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.stack-card-536 .l3 { background: #cbd5e1; transform: translateY(0) scale(0.9); }
.stack-card-536 .l2 { background: #94a3b8; transform: translateY(0) scale(0.95); }
.stack-card-536 .l1 { background: #0f172a; transform: translateY(0) scale(1); z-index: 3; }
.stack-card-536:hover .l2 { transform: translateY(-12px) scale(0.95); z-index: 2; }
.stack-card-536:hover .l3 { transform: translateY(-24px) scale(0.9); z-index: 1; }