Design for AIEsquinas achaflanadas
Esquinas achaflanadas: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Un botón amarillo #facc15 estilo HUD con dos esquinas opuestas (superior izquierda e inferior derecha) achaflanadas 12px usando un polígono clip-path, texto casi negro en mayúsculas de 14px en negrita con 0.1em de tracking, padding de 14px por 32px. Al pasar el cursor los chaflanes se reducen a 6px (clip-path animado, 200ms) y el color se aclara a #fde047; en active se amplían a 16px sobre #eab308. Foco con outline amarillo de 2px y offset de 4px.