Chamfered corners

Chamfered corners: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A yellow #facc15 HUD-style button with two opposite corners (top-left and bottom-right) chamfered 12px using a clip-path polygon, uppercase 14px bold near-black text with 0.1em tracking, 14px by 32px padding. On hover the chamfers shrink to 6px (animated clip-path, 200ms) and the colour lightens to #fde047; active enlarges them to 16px on #eab308. Focus 2px yellow outline offset 4px.

Chamfered corners

Same shelf