Relleno inset central

Relleno inset central: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de contorno verde sobre blanco: borde de 2px #047857, radio de 10px, texto verde de 15px semibold, padding de 12px por 26px. Al pasar el cursor el relleno crece hacia dentro desde los cuatro bordes hacia el centro (spread de box-shadow inset de 0 a 30px) y el texto se vuelve blanco, 300ms. En active usa el #065f46 más oscuro. Foco con outline verde de 2px y offset de 3px.

Relleno inset central

Misma estantería