Back to CSS Buttons Mercury Bead Pure CSS
Share
HTML
<button class="btn-mercury">Liquid</button>
CSS
.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);
}