Design for AIParallax layers
Parallax layers: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A cyan #0891b2 button with a darker #164e63 slab pseudo-element sitting 14px behind it in 3D (preserve-3d, perspective 600px), white 15px bold text, 10px radius, 16px by 32px padding. On hover the whole button rotates 18 degrees around Y, the back slab drops to 24px behind and shifts left, and the label pops 18px forward, so the three layers separate like parallax. Active eases back to a 6 degree turn at 0.98 scale. Focus 2px cyan outline.