Inclinação skew

Inclinação skew: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão vermelho #dc2626 com skew de 12 graus, inclinado para frente (o span do rótulo recebe o skew contrário para o texto ficar reto), texto branco em caixa alta de 15px extra-bold com tracking de 0.06em, raio de 4px, padding de 14px por 28px e uma sombra dura deslocada 4px em #7f1d1d. No hover se move 2px para cima e para a esquerda e a sombra cresce para 6px, cor #b91c1c; no active é pressionado para baixo e para a direita sobre uma sombra de 2px. Foco com outline vermelho de 2px.

Inclinação skew

Mesma prateleira