Design for AICantos chanfrados
Cantos chanfrados: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão amarelo #facc15 estilo HUD com dois cantos opostos (superior esquerdo e inferior direito) chanfrados em 12px usando um polígono de clip-path, texto quase preto em caixa alta de 14px bold com tracking de 0.1em, padding de 14px por 32px. No hover os chanfros encolhem para 6px (clip-path animado, 200ms) e a cor clareia para #fde047; no active crescem para 16px sobre #eab308. Foco com outline amarelo de 2px e offset de 4px.