button effect

by oktaviardi pratama

HTML

<button class="pulse-button" id="pulseBtn">Click Me!</button>

CSS

.pulse-button {
      position: relative;
      padding: 16px 32px;
      font-size: 18px;
      font-weight: 600;
      color: white;
      background: linear-gradient(135deg, #6a11cb, #2575fc);
      border: none;
      border-radius: 50px;
      cursor: pointer;
      overflow: hidden;
      z-index: 1;
      box-shadow: 0 4px 20px rgba(37, 117, 252, 0.4);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .pulse-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(37, 117, 252, 0.6);
    }

    .pulse-button:active {
      transform: translateY(1px);
    }

    /* Pulse effect container */
    .pulse-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50px;
      pointer-events: none;
    }

    .pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: pulseAnimation 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    @keyframes pulseAnimation {
      0% {
        width: 20px;
        height: 20px;
        opacity: 0.7;
      }
      100% {
        width: 400px;
        height: 400px;
        opacity: 0;
      }
    }

JavaScript

const button = document.getElementById('pulseBtn');

    button.addEventListener('click', (e) => {
      // Create pulse container if not exists
      let container = button.querySelector('.pulse-container');
      if (!container) {
        container = document.createElement('div');
        container.className = 'pulse-container';
        button.appendChild(container);
      }

      // Create new pulse element
      const pulse = document.createElement('span');
      pulse.className = 'pulse';
      container.appendChild(pulse);

      // Optional: remove pulse after animation ends to avoid DOM bloat
      setTimeout(() => {
        pulse.remove();
      }, 1200);
    });