Mercury Bead
Quicksilver bead that morphs its border-radius on hover, like surface tension giving way under pressure.
Mercury Bead the 23rd 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-mercury">Liquid</button>
.btn-mercury {
padding: 14px 32px;
border: none;
border-radius: 50% 14px 50% 14px / 14px 50% 14px 50%;
background: radial-gradient(circle at 30% 30%, #e0e6ec 0%, #bcc4ce 50%, #5a6470 100%);
color: #1e242a;
font-family: ui-sans-serif, system-ui;
font-size: 14px; font-weight: 700;
cursor: pointer;
box-shadow:
inset 0 -4px 8px rgba(30,36,42,0.4),
inset 0 2px 4px rgba(255,255,255,0.6),
0 4px 12px rgba(30,36,42,0.4);
transition: border-radius 0.5s cubic-bezier(.3,1.2,.3,1), transform 0.3s;
}
.btn-mercury:hover {
border-radius: 14px 50% 14px 50% / 50% 14px 50% 14px;
transform: scale(1.04);
}