Button Press Effect

Scale and shadow on press with optional success checkmark — satisfying click feedback for buttons and controls.

css vanilla-js

ターゲット: JS HTML

コード

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.press-btn {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: #3b82f6;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.press-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.press-btn--success.done {
  background: #22c55e;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
}

.press-btn--success.done::after {
  content: " ✓";
}

document.getElementById("btn-success").addEventListener("click", function () {
  this.classList.add("done");
  const t = setTimeout(() => {
    this.classList.remove("done");
    clearTimeout(t);
  }, 1200);
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Button Press Effect</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <button type="button" class="press-btn" id="btn">Click me</button>
    <button type="button" class="press-btn press-btn--success" id="btn-success">Copy</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

Button Press Effect

Reusable press feedback: scale down and shadow on active, with optional success checkmark. Reference patterns from like-button and copy-to-clipboard.

Features

CSS transform: scale() and box-shadow on :active
Optional brief success state (checkmark) via class toggle
No dependencies