HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS :active Press Effect</title>
  <style>
    .card-btn {
      display: inline-block;
      padding: 14px 28px;
      background: linear-gradient(180deg, #3b82f6, #2563eb);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 0 #1d4ed8;
      transform: translateY(0);
      transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .card-btn:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>Press-Down Button</h1>
  <p>Click and hold the button to feel the press effect.</p>

  <button type="button" class="card-btn">Get Started</button>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS :active Press Effect on a Card Button