Design for AIRelleno inset diagonal doble
Relleno inset diagonal doble: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-149 {
font: 600 14px/1 system-ui,sans-serif;
color: #1d4ed8;
background: transparent;
border: 2px solid #1d4ed8;
border-radius: 4px;
padding: 12px 24px;
cursor: pointer;
box-shadow: inset 0 0 0 0 #1d4ed8,inset 0 0 0 0 #1d4ed8;
transition: box-shadow .3s,color .3s
}
.btn-149:hover {
box-shadow: inset 110px 0 0 0 #1d4ed8,inset -110px 0 0 0 #1d4ed8;
color: #fff
}
.btn-149:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 3px
}
.btn-149:active {
box-shadow: inset 110px 0 0 0 #1e3a8a,inset -110px 0 0 0 #1e3a8a;
border-color: #1e3a8a
}
HTML
<button class="btn-149">Compare</button>Prompt
Un botón de contorno azul (transparente, borde de 2px #1d4ed8, radio de 4px, texto azul de 14px semibold, padding de 12px por 24px) que se rellena desde ambos lados a la vez al pasar el cursor: dos box-shadow inset, uno con offset horizontal de +110px y otro de -110px, que se encuentran en el centro mientras el texto se vuelve blanco, 300ms. En active se oscurece a #1e3a8a. Foco con outline azul de 2px.