Gekerbter Tag

Gekerbter Tag: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein tiefblauer #0c4a6e Pfeil-Tag-Button mit Polygon-Clip: ein spitzes rechtes Ende (18px) und eine 10px Kerbe nach innen links, kein Radius. Text in Versalien 14px bold #e0f2fe mit 0.06em Tracking, Padding 14px 26px 14px 30px, und ein winziges 8px Monospace-Label "Sys.02" in #7dd3fc in der oberen linken Ecke. Hover #075985, active #082f49 mit 2px mehr Padding links. Fokus 2px hellblaue Outline.

Gekerbter Tag

Gleiches Regal