Etiqueta con muesca

Etiqueta con muesca: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón etiqueta en forma de flecha azul profundo #0c4a6e recortado con un polígono: un extremo derecho en punta (18px) y una muesca de 10px hacia dentro a la izquierda, sin radio. Texto #e0f2fe en mayúsculas de 14px en negrita con 0.06em de tracking, padding 14px 26px 14px 30px, y una etiqueta diminuta monoespaciada de 8px "Sys.02" en #7dd3fc fijada en la esquina superior izquierda. Hover #075985, active #082f49 con 2px extra de padding izquierdo. Foco con outline azul claro de 2px.

Etiqueta con muesca

Misma estantería