Preenchimento inset duplo

Preenchimento inset duplo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

inset-filloutlinerectanglebox-shadowtwo-shadows

CSS

.btn-149 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #1d4ed8;
  background: transparent;
  border: 2px solid #1d4ed8;
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #1d4ed8,inset 0 0 0 0 #1d4ed8;
  transition: box-shadow .3s,color .3s
}
.btn-149:hover {
  box-shadow: inset 110px 0 0 0 #1d4ed8,inset -110px 0 0 0 #1d4ed8;
  color: #fff
}
.btn-149:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 3px
}
.btn-149:active {
  box-shadow: inset 110px 0 0 0 #1e3a8a,inset -110px 0 0 0 #1e3a8a;
  border-color: #1e3a8a
}

HTML

<button class="btn-149">Compare</button>

Prompt

Um botão outline azul (transparente, borda de 2px #1d4ed8, raio de 4px, texto azul de 14px semibold, padding de 12px por 24px) que se preenche pelos dois lados ao mesmo tempo no hover: dois box-shadows inset, um com offset horizontal de +110px e outro de -110px, se encontrando no meio enquanto o texto fica branco, 300ms. No active escurece para #1e3a8a. Foco com outline azul de 2px.

Preenchimento inset duplo

Mesma prateleira