Abgeschrägte Ecken

Abgeschrägte Ecken: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

cyberpunkclip-pathrectangleangularhud

CSS

.btn-142 {
  position: relative;
  font: 700 14px/1 system-ui,sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0a0a0f;
  background: #facc15;
  border: 0;
  padding: 14px 32px;
  cursor: pointer;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition: background .15s,clip-path .2s
}
.btn-142:hover {
  background: #fde047;
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)
}
.btn-142:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 4px
}
.btn-142:active {
  background: #eab308;
  clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)
}

HTML

<button class="btn-142">Deploy</button>

Prompt

Ein gelber #facc15 HUD-Button, bei dem zwei gegenüberliegende Ecken (oben links und unten rechts) per clip-path Polygon 12px abgeschrägt sind, Text in Versalien 14px bold fast schwarz mit 0.1em Tracking, 14px mal 32px Padding. Beim Hover schrumpfen die Schrägen auf 6px (animierter clip-path, 200ms) und die Farbe hellt auf #fde047; active vergrößert sie auf 16px bei #eab308. Fokus 2px gelbe Outline mit 4px Offset.

Abgeschrägte Ecken

Gleiches Regal