Klassische Pille

Klassische Pille: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

pill solidroundedshadow-lift

CSS

.btn-017 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0ea5e9;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(14,165,233,.3);
  transition: transform .15s,box-shadow .15s,background .15s
}
.btn-017:hover {
  background: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(14,165,233,.35)
}
.btn-017:focus-visible {
  outline: 3px solid rgba(14,165,233,.45);
  outline-offset: 2px
}
.btn-017:active {
  transform: none;
  box-shadow: 0 1px 3px rgba(14,165,233,.3)
}

HTML

<button class="btn-017">Start free trial</button>

Prompt

Ein voll abgerundeter Pillen-Button, himmelblauer Hintergrund #0ea5e9, weißer Text 15px semibold, 13px mal 26px Padding, weicher blauer Schatten 0 2px 6px. Beim Hover dunkelt er auf #0284c7, hebt sich 2px und der Schatten wächst auf 0 8px 18px. Active kehrt flach mit kleinem Schatten zurück. Fokusring 3px halbtransparentes Himmelblau.

Klassische Pille

Gleiches Regal