Clay Press
A chunky claymorphism button with a thick 3D base shadow. Press it and the whole shape squishes down and stretches wide, with a soft white bloom blossoming from the click point.
Clay Press the 10th 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-clay">Confirm</button>
.btn-clay {
position: relative;
padding: 18px 40px;
border: none;
border-radius: 20px;
background: #2ecc71;
color: #fff;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
overflow: hidden;
user-select: none;
box-shadow:
0 6px 0 #1a7a43,
0 10px 20px rgba(0,0,0,0.3),
inset 0 2px 4px rgba(255,255,255,0.2);
transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-clay:hover {
transform: translateY(-3px) scale(1.03);
box-shadow:
0 9px 0 #1a7a43,
0 16px 30px rgba(0,0,0,0.35),
inset 0 2px 4px rgba(255,255,255,0.2);
}
.btn-clay:active {
transform: translateY(4px) scale(0.95) scaleX(1.06);
box-shadow:
0 2px 0 #1a7a43,
0 4px 10px rgba(0,0,0,0.2),
inset 0 2px 8px rgba(0,0,0,0.2);
filter: saturate(1.4) brightness(0.95);
}
.btn-clay-blob {
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(255,255,255,0.25);
pointer-events: none;
animation: btn-clay-bloom 0.5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes btn-clay-bloom {
0% { transform: scale(0); opacity: 0.8; }
100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn-clay-blob { animation: none; display: none; }
} document.querySelectorAll('.btn-clay').forEach(function (btn) {
btn.addEventListener('click', function (e) {
var r = btn.getBoundingClientRect();
var size = Math.max(r.width, r.height);
var blob = document.createElement('div');
blob.className = 'btn-clay-blob';
blob.style.width = size + 'px';
blob.style.height = size + 'px';
blob.style.left = (e.clientX - r.left - size / 2) + 'px';
blob.style.top = (e.clientY - r.top - size / 2) + 'px';
btn.appendChild(blob);
blob.addEventListener('animationend', function () { this.remove(); });
});
});