Design for AIMarcas en cuatro esquinas
Marcas en cuatro esquinas: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-152 {
position: relative;
font: 600 14px/1 system-ui,sans-serif;
color: #0f172a;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 14px 26px;
cursor: pointer;
transition: background .2s
}
.btn-152 span {
position: relative;
z-index: 1
}
.btn-152::before,.btn-152::after {
content: "";
position: absolute;
inset: -5px;
pointer-events: none;
background: linear-gradient(#0f172a,#0f172a) top left/10px 2px no-repeat,linear-gradient(#0f172a,#0f172a) top left/2px 10px no-repeat,linear-gradient(#0f172a,#0f172a) bottom right/10px 2px no-repeat,linear-gradient(#0f172a,#0f172a) bottom right/2px 10px no-repeat;
opacity: 0;
transition: opacity .2s,inset .2s
}
.btn-152::after {
transform: scaleX(-1)
}
.btn-152:hover::before,.btn-152:hover::after {
opacity: 1;
inset: -3px
}
.btn-152:focus-visible {
outline: 2px solid #0f172a;
outline-offset: 6px
}
.btn-152:active {
background: #e2e8f0
}
HTML
<button class="btn-152"><span>Focus</span></button>Prompt
Un botón pálido #f8fafc con borde 1px #e2e8f0, esquinas rectas, texto #0f172a 14px semibold, padding 14px por 26px. En hover aparecen cuatro marcas de visor (marcas en L de 10px por 2px, construidas con fondos degradados en dos pseudoelementos espejados) alrededor del exterior y se ajustan de 5px a 3px de distancia del borde, como una cámara enfocando. Active #e2e8f0. Focus con outline de 2px y offset 6px para que libre las marcas.