Design for AIGedrückter Drehknopf
Gedrückter Drehknopf: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-130 {
width: 56px;
height: 56px;
display: inline-grid;
place-items: center;
color: #334155;
background: radial-gradient(circle at 35% 30%,#fff,#dfe3e8);
border: 1px solid #b8bec7;
border-radius: 50%;
cursor: pointer;
box-shadow: inset 0 1px 0 #fff,0 3px 6px #0003,0 0 0 6px #eef0f3,0 0 0 7px #cfd4da;
transition: box-shadow .15s,transform .15s,color .15s
}
.btn-130:hover {
color: #0f172a
}
.btn-130:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 8px
}
.btn-130:active {
transform: scale(.96);
box-shadow: inset 0 3px 6px #0003,0 0 0 6px #eef0f3,0 0 0 7px #cfd4da
}
HTML
<button class="btn-130" aria-label="Increase"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></button>Prompt
Ein runder 56px Drehknopf-Button mit außermittigem radialem Glanzpunkt (Weiß bei 35% 30% nach #dfe3e8), 1px Rahmen #b8bec7, ein 6px blasser Blendenring plus ein 1px dunklerer Ring außen (beide via box-shadow), ein 3px Drop-Shadow und ein Inline-Plus-Icon in #334155. Hover dunkelt das Icon; active skaliert auf 0.96 und tauscht den Drop-Shadow gegen einen 3px Inset-Schatten, sodass er eingedrückt wirkt. Fokus 2px blaue Outline mit 8px Offset, damit sie die Blende freilässt.