<button class="btn-pill">
  <span class="btn-pill-half btn-pill-l" aria-hidden="true"></span>
  <span class="btn-pill-half btn-pill-r" aria-hidden="true"></span>
  <span class="btn-pill-band">
    <span class="btn-pill-text">PRESCRIBE 500 MG</span>
  </span>
</button>

.btn-pill {
  position: relative;
  width: 220px; height: 48px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 4px 10px rgba(58,120,201,0.3));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn-pill-half {
  position: absolute; top: 0; bottom: 0; width: 50%;
}
.btn-pill-l {
  left: 0;
  background: linear-gradient(180deg, #5a96e0 0%, #3a78c9 60%, #2a5a99 100%);
  border-radius: 999px 0 0 999px;
  box-shadow: inset 4px 0 6px rgba(0,0,0,0.1);
}
.btn-pill-l::after {
  content: '';
  position: absolute; top: 5px; left: 14px; right: 4px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  border-radius: 999px 0 0 0;
}
.btn-pill-r {
  right: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e8edf2 60%, #c8d2dc 100%);
  border-radius: 0 999px 999px 0;
  box-shadow: inset -4px 0 6px rgba(0,0,0,0.08);
}
.btn-pill-r::after {
  content: '';
  position: absolute; top: 5px; left: 4px; right: 14px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  border-radius: 0 999px 0 0;
}
.btn-pill-band {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86%; height: 22px;
  background: #0e0e1a;
  border-radius: 4px;
  display: grid; place-items: center;
  z-index: 1;
}
.btn-pill-text {
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 800;
  color: #fdfcfa;
  letter-spacing: 0.18em;
}
.btn-pill:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 14px rgba(58,120,201,0.45)); }