Inclinación sesgada

Inclinación sesgada: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón rojo #dc2626 sesgado 12 grados para inclinarse hacia delante (el span de la etiqueta lleva el sesgo contrario para que el texto quede recto), texto blanco en mayúsculas de 15px extra bold con 0.06em de tracking, radio de 4px, padding de 14px por 28px, y una sombra dura desplazada 4px en #7f1d1d. Al pasar el cursor se mueve 2px arriba a la izquierda y la sombra crece a 6px, color #b91c1c; en active se hunde abajo a la derecha sobre una sombra de 2px. Foco con outline rojo de 2px.

Inclinación sesgada

Misma estantería