Skew lean

Skew lean: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A red #dc2626 button skewed 12 degrees to lean forward (the label span is counter-skewed so text stays upright), white uppercase 15px extra-bold text with 0.06em tracking, 4px radius, 14px by 28px padding, and a hard 4px offset shadow in #7f1d1d. Hover shifts it 2px up-left and grows the shadow to 6px, colour #b91c1c; active presses it down-right onto a 2px shadow. Focus 2px red outline.

Skew lean

Same shelf