Button Press Depth
A tactile button press effect with scale reduction and shadow compression that simulates physical depth. Use for primary action buttons where you want users to feel a satisfying click response.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
buttonpressdepthshadowscale
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A tactile button press with scale reduction and shadow compression for physical depth feel.
CSS
css
.btn { padding: 14px 28px; border: none; border-radius: 10px; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 6px 0 4px rgba(0,0,0,0.3); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.btn:active { transform: translateY(4px) scale(0.98); box-shadow: 0 2px 0 2px rgba(0,0,0,0.2); }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<button class="btn">Press me</button>Full Source
html
<!DOCTYPE html>
<html><head><style>
.btn { padding: 14px 28px; border: none; border-radius: 10px; background: #6366f1; color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 6px 0 4px rgba(0,0,0,0.3); transition: transform 0.1s ease, box-shadow 0.1s ease; }
.btn:active { transform: translateY(4px) scale(0.98); box-shadow: 0 2px 0 2px rgba(0,0,0,0.2); }
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style></head><body><button class="btn">Press me</button></body></html>