Píldora clásica

Píldora clásica: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón píldora totalmente redondeado, fondo azul cielo #0ea5e9, texto blanco de 15px semibold, padding de 13px por 26px, sombra azul suave 0 2px 6px. Al pasar el cursor se oscurece a #0284c7, se eleva 2px y la sombra crece a 0 8px 18px. En active vuelve a plano con una sombra pequeña. Anillo de foco de 3px azul cielo translúcido.

Píldora clásica

Misma estantería