Capas con parallax

Capas con parallax: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

tilt3dlayeredrectangledepth

CSS

.btn-123 {
  position: relative;
  font: 700 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0891b2;
  border: 0;
  border-radius: 10px;
  padding: 16px 32px;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateY(0);
  transition: transform .3s
}
.btn-123::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #164e63;
  transform: translateZ(-14px);
  transition: transform .3s
}
.btn-123 span {
  display: block;
  transform: translateZ(0);
  transition: transform .3s
}
.btn-123:hover {
  transform: perspective(600px) rotateY(-18deg)
}
.btn-123:hover::before {
  transform: translateZ(-24px) translateX(-6px)
}
.btn-123:hover span {
  transform: translateZ(18px)
}
.btn-123:focus-visible {
  outline: 2px solid #0891b2;
  outline-offset: 4px
}
.btn-123:active {
  transform: perspective(600px) rotateY(-6deg) scale(.98)
}

HTML

<button class="btn-123"><span>Depth</span></button>

Prompt

Un botón cian #0891b2 con un pseudoelemento en forma de losa más oscura #164e63 situado 14px por detrás en 3D (preserve-3d, perspective 600px), texto blanco de 15px en negrita, radio de 10px, padding de 16px por 32px. Al pasar el cursor todo el botón gira 18 grados sobre Y, la losa trasera cae a 24px por detrás y se desplaza a la izquierda, y la etiqueta salta 18px hacia delante, de modo que las tres capas se separan como en un parallax. En active vuelve suavemente a un giro de 6 grados a escala 0.98. Foco con outline cian de 2px.

Capas con parallax

Misma estantería