Pílula clássica

Pílula clássica: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão pílula totalmente arredondado, fundo azul céu #0ea5e9, texto branco de 15px semibold, padding de 13px por 26px, sombra azul suave 0 2px 6px. No hover escurece para #0284c7, sobe 2px e a sombra cresce para 0 8px 18px. No active volta ao plano com uma sombra pequena. Anel de foco de 3px azul céu translúcido.

Pílula clássica

Mesma prateleira