Design for AIPixel 8-Bit
Pixel 8-Bit: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Ein 8-Bit Pixel-Art-Button: rote #e5484d Füllung mit eckigen Ecken, die zu einer gestuften Pixel-Kontur geschnitten sind (4px box-shadow Arme auf jeder Seite, kein Blur), und einem 4px dunkelroten #8e1c22 Pixel-Sockel entlang der Unterkante, weißes Monospace 14px bold "START" mit 0.1em Spacing, 12px mal 22px Padding, keine Transitions. Hover hellt auf #f05b60; Drücken bewegt ihn 4px nach unten und entfernt den Sockel. Fokus zeigt eine gepunktete weiße Outline innen.