# Preenchimento inset central (B 148)

Categoria: Botões  
Tags: inset-fill, outline, rounded, box-shadow, spread-from-centre  
Página: https://designforai.dev/pt/snippet/btn-148

## Prompt

Um botão outline verde sobre branco: borda de 2px #047857, raio de 10px, texto verde de 15px semibold, padding de 12px por 26px. No hover o preenchimento cresce para dentro a partir das quatro arestas em direção ao centro (spread do box-shadow inset de 0 a 30px) e o texto fica branco, 300ms. No active usa o mais escuro #065f46. Foco com outline verde de 2px e offset de 3px.

## HTML

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

## CSS

```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
}
```