Design for AIPíxel 8 bits
Píxel 8 bits: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-092 {
font: 700 14px/1 ui-monospace,Menlo,monospace;
letter-spacing: .1em;
color: #fff;
background: #e5484d;
border: 0;
padding: 12px 22px;
cursor: pointer;
image-rendering: pixelated;
box-shadow: -4px 0 0 #e5484d,4px 0 0 #e5484d,0 -4px 0 #e5484d,0 4px 0 #e5484d,-4px 4px 0 #8e1c22,4px 4px 0 #8e1c22,0 8px 0 #8e1c22;
transition: none
}
.btn-092:hover {
background: #f05b60;
box-shadow: -4px 0 0 #f05b60,4px 0 0 #f05b60,0 -4px 0 #f05b60,0 4px 0 #f05b60,-4px 4px 0 #8e1c22,4px 4px 0 #8e1c22,0 8px 0 #8e1c22
}
.btn-092:focus-visible {
outline: 3px dotted #fff;
outline-offset: -6px
}
.btn-092:active {
transform: translateY(4px);
box-shadow: -4px 0 0 #e5484d,4px 0 0 #e5484d,0 -4px 0 #e5484d,0 4px 0 #e5484d
}
HTML
<button class="btn-092">START</button>Prompt
Un botón pixel art de 8 bits: relleno rojo #e5484d con esquinas cuadradas recortadas en un contorno escalonado de píxeles (brazos de box-shadow de 4px a cada lado, sin desenfoque) y una base de píxeles de 4px en rojo oscuro #8e1c22 a lo largo de la parte inferior, texto blanco monoespaciado de 14px en negrita "START" con 0.1em de espaciado, padding de 12px por 22px, sin transiciones. Al pasar el cursor se aclara a #f05b60; al pulsar baja 4px y pierde la base. El foco muestra un outline blanco punteado por dentro.