Classic pill

Classic pill: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A fully rounded pill button, sky blue #0ea5e9 background, white 15px semibold text, 13px by 26px padding, soft blue shadow 0 2px 6px. On hover it darkens to #0284c7, lifts 2px and the shadow grows to 0 8px 18px. Active returns to flat with a small shadow. Focus ring 3px translucent sky.

Classic pill

Same shelf