Design for AIGlaskuppel-Taste
Glaskuppel-Taste: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-129 {
position: relative;
font: 700 15px/1 system-ui,sans-serif;
color: #fff;
text-shadow: 0 -1px 1px #0006;
background: linear-gradient(#3b82f6,#1d4ed8);
border: 1px solid #1e40af;
border-radius: 999px;
padding: 14px 32px;
cursor: pointer;
box-shadow: inset 0 1px 0 #93c5fd,inset 0 -3px 6px #1e3a8a,0 4px 10px #1e40af66;
transition: filter .15s,box-shadow .15s,transform .15s;
overflow: hidden
}
.btn-129::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: 2px;
height: 45%;
border-radius: 999px;
background: linear-gradient(#fff9,#fff0);
pointer-events: none
}
.btn-129:hover {
filter: brightness(1.08)
}
.btn-129:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 4px
}
.btn-129:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 #93c5fd,inset 0 -1px 3px #1e3a8a,0 1px 3px #1e40af66;
filter: brightness(.95)
}
HTML
<button class="btn-129">Play</button>Prompt
Eine glänzende blaue Pille im Jelly-Stil: Verlauf #3b82f6 nach #1d4ed8, 1px Rahmen #1e40af, weißer Text 15px bold mit dunklem Schatten nach unten, 14px mal 32px Padding, ein 1px hellblauer Inset-Glanz oben, ein 3px dunklerer Inset-Schatten unten, ein 4px blauer Drop-Shadow und eine Glanzreflexion von Weiß nach transparent über die oberen 45% (Pseudo-Element, 8% seitlicher Einzug). Hover hellt 8% auf; active rutscht 2px ab und flacht die Schatten ab. Fokus 2px blaue Outline mit 4px Offset.