Gestapelte Ebenen

Gestapelte Ebenen: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

3dlayeredoffsetretro

CSS

.btn-055 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #1e1b4b;
  background: #c7d2fe;
  border: 2px solid #1e1b4b;
  border-radius: 6px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #1e1b4b,6px 6px 0 #a5b4fc,9px 9px 0 #1e1b4b;
  transition: transform .12s,box-shadow .12s
}
.btn-055:hover {
  transform: translate(-2px,-2px);
  box-shadow: 5px 5px 0 #1e1b4b,10px 10px 0 #a5b4fc,15px 15px 0 #1e1b4b
}
.btn-055:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: 4px
}
.btn-055:active {
  transform: translate(4px,4px);
  box-shadow: 0 0 0 #1e1b4b,2px 2px 0 #a5b4fc,4px 4px 0 #1e1b4b
}

HTML

<button class="btn-055">Stack</button>

Prompt

Ein 3D-Button aus gestapelten Ebenen: Perlblau #c7d2fe Füllung, 2px Rahmen #1e1b4b, 6px Radius, dunkler Text 15px bold, 12px mal 26px Padding und drei harte Versatzschatten bei 3px, 6px und 9px, abwechselnd dunkel/#a5b4fc/dunkel, sodass er wie ein Kartenstapel aussieht. Hover fächert den Stapel auf (5/10/15px); Drücken presst ihn zusammen (0/2/4px). Fokus-Outline 3px Indigo.

Gestapelte Ebenen

Gleiches Regal