Tag com recorte

Tag com recorte: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

cyberpunkclip-pathrectanglenotchlabel

CSS

.btn-144 {
  position: relative;
  font: 700 14px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #e0f2fe;
  background: #0c4a6e;
  border: 0;
  padding: 14px 26px 14px 30px;
  cursor: pointer;
  clip-path: polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,10px 50%);
  transition: background .15s
}
.btn-144 span {
  position: absolute;
  left: 14px;
  top: 3px;
  font: 600 8px/1 ui-monospace,monospace;
  letter-spacing: .1em;
  color: #7dd3fc;
  opacity: .8
}
.btn-144:hover {
  background: #075985
}
.btn-144:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 3px
}
.btn-144:active {
  background: #082f49;
  padding-left: 32px
}

HTML

<button class="btn-144"><span>Sys.02</span>Override</button>

Prompt

Um botão-tag em seta azul profundo #0c4a6e recortado com um polígono: ponta à direita (18px) e um recorte de 10px para dentro à esquerda, sem raio. Texto #e0f2fe em caixa alta de 14px bold com tracking de 0.06em, padding 14px 26px 14px 30px, e um rótulo minúsculo monoespaçado de 8px "Sys.02" em #7dd3fc preso ao canto superior esquerdo. Hover #075985, active #082f49 com 2px extras de padding à esquerda. Foco com outline azul claro de 2px.

Tag com recorte

Mesma prateleira