Gel Capsule
Pill-shaped pharma capsule split half clinical-blue, half pearl-white, with a chunky black band carrying the dose label. Hover brightens both halves.
Gel Capsule the 18th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<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)); }