Skew-Neigung

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

tiltskewrectangleitalicshadow-offset

CSS

.btn-125 {
  font: 800 15px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: #dc2626;
  border: 0;
  border-radius: 4px;
  padding: 14px 28px;
  cursor: pointer;
  transform: skewX(-12deg);
  box-shadow: 4px 4px 0 #7f1d1d;
  transition: transform .2s,box-shadow .2s,background .2s
}
.btn-125 span {
  display: inline-block;
  transform: skewX(12deg)
}
.btn-125:hover {
  transform: skewX(-12deg) translate(-2px,-2px);
  box-shadow: 6px 6px 0 #7f1d1d;
  background: #b91c1c
}
.btn-125:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 4px
}
.btn-125:active {
  transform: skewX(-12deg) translate(2px,2px);
  box-shadow: 2px 2px 0 #7f1d1d
}

HTML

<button class="btn-125"><span>Fast</span></button>

Prompt

Ein roter #dc2626 Button, um 12 Grad geneigt, sodass er nach vorn lehnt (der Label-span ist gegengeneigt, damit der Text aufrecht bleibt), weißer Text in Versalien 15px extra-bold mit 0.06em Tracking, 4px Radius, 14px mal 28px Padding und ein harter 4px Versatzschatten in #7f1d1d. Hover schiebt 2px nach oben links und vergrößert den Schatten auf 6px, Farbe #b91c1c; active drückt nach unten rechts auf einen 2px Schatten. Fokus 2px rote Outline.

Skew-Neigung

Gleiches Regal