Magnetic Mercury
A liquid-metal pill with a polished radial sheen. Click anywhere on the surface and a bright ripple expands from the exact point of contact, like mercury catching the light.
Magnetic Mercury the 7th of 43 designs in the 43 CSS Button Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). 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-merc">Initiate</button>
.btn-merc {
position: relative;
padding: 16px 38px;
border: none;
border-radius: 60px;
background: linear-gradient(135deg, #e8e0d5 0%, #c8bfb0 50%, #a89f94 100%);
color: #0c0c0f;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
user-select: none;
box-shadow:
0 2px 20px rgba(200,191,176,0.15),
inset 0 1px 0 rgba(255,255,255,0.4),
inset 0 -1px 0 rgba(0,0,0,0.15);
transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.btn-merc::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(255,255,255,0.6) 0%, transparent 60%);
pointer-events: none;
}
.btn-merc:hover {
transform: scale(1.04) translateY(-2px);
box-shadow:
0 8px 40px rgba(200,191,176,0.25),
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba(0,0,0,0.1);
}
.btn-merc:active { transform: scale(0.94); }
.btn-merc-ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(255,255,255,0.4);
pointer-events: none;
animation: btn-merc-ripple 0.7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-merc-ripple {
to { transform: scale(4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn-merc-ripple { animation: none; display: none; }
} document.querySelectorAll('.btn-merc').forEach(function (btn) {
btn.addEventListener('click', function (e) {
var r = btn.getBoundingClientRect();
var size = Math.max(r.width, r.height) * 1.5;
var ripple = document.createElement('span');
ripple.className = 'btn-merc-ripple';
ripple.style.width = size + 'px';
ripple.style.height = size + 'px';
ripple.style.left = (e.clientX - r.left - size / 2) + 'px';
ripple.style.top = (e.clientY - r.top - size / 2) + 'px';
btn.appendChild(ripple);
ripple.addEventListener('animationend', function () { this.remove(); });
});
});