Notched tag

Notched tag: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A deep blue #0c4a6e arrow-tag button clipped with a polygon: a pointed right end (18px) and a 10px inward notch on the left, no radius. Uppercase 14px bold #e0f2fe text with 0.06em tracking, padding 14px 26px 14px 30px, and a tiny 8px monospace "Sys.02" label in #7dd3fc pinned to the top-left corner. Hover #075985, active #082f49 with 2px extra left padding. Focus 2px light-blue outline.

Notched tag

Same shelf