# Parallax-Ebenen (B 123)

Kategorie: Buttons  
Tags: tilt, 3d, layered, rectangle, depth  
Seite: https://designforai.dev/de/snippet/btn-123

## Prompt

Ein Cyan #0891b2 Button mit einer dunkleren #164e63 Platte als Pseudo-Element 14px dahinter in 3D (preserve-3d, perspective 600px), weißer Text 15px bold, 10px Radius, 16px mal 32px Padding. Beim Hover dreht sich der ganze Button 18 Grad um Y, die hintere Platte fällt auf 24px zurück und rückt nach links, und das Label springt 18px nach vorn, sodass sich die drei Ebenen wie Parallax trennen. Active geht sanft auf 6 Grad Drehung bei 0.98 Scale zurück. Fokus 2px Cyan-Outline.

## HTML

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

## CSS

```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)
}
```