Inset-Füllung Mitte

Inset-Füllung Mitte: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

inset-filloutlineroundedbox-shadowspread-from-centre

CSS

.btn-148 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #047857;
  background: #fff;
  border: 2px solid #047857;
  border-radius: 10px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #047857;
  transition: box-shadow .3s,color .2s
}
.btn-148:hover {
  box-shadow: inset 0 0 0 30px #047857;
  color: #fff
}
.btn-148:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 3px
}
.btn-148:active {
  box-shadow: inset 0 0 0 30px #065f46;
  border-color: #065f46
}

HTML

<button class="btn-148">Apply</button>

Prompt

Ein grüner Outline-Button auf Weiß: 2px Rahmen #047857, 10px Radius, grüner Text 15px semibold, 12px mal 26px Padding. Beim Hover wächst die Füllung von allen vier Kanten nach innen zur Mitte (inset box-shadow Spread 0 auf 30px) und der Text wird weiß, 300ms. Active nutzt das dunklere #065f46. Fokus 2px grüne Outline mit 3px Offset.

Inset-Füllung Mitte

Gleiches Regal