pulsante dom

833 kevekıbhack

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

23 November 2025

Pulsante Firefly HTML CSS Tailwind

18 October 2025

Esempio HTML del pulsante Hover arcobaleno

18 October 2025

Pulsante HTML con effetto hover (WEBLEB)

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>DOM ile 3D Buton kvb</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: #0d1117;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', sans-serif;
    }

.btn-3d {
      position: relative;
      overflow: hidden;
      padding: 14px 30px;
      font-size: 16px;
      font-weight: bold;
      color: white;
      background: linear-gradient(145deg, #0077b6, #0096c7);
      border: none;
      border-radius: 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 0 #023e8a, 0 12px 24px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

.btn-3d:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 4px 0 #023e8a, 0 10px 20px rgba(0, 0, 0, 0.3);
    }

.btn-3d:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 #001d3d;
    }

.ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      opacity: 0.7;
      pointer-events: none;
    }

@keyframes ripple-effect {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

.icon {
      fill: white;
    }
  </style>
</head>
<body>

const button = document.createElement('button');
    button.className = 'btn-3d ripple-btn';

// SVG ikon
    const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    icon.setAttribute('class', 'icon');
    icon.setAttribute('width', '20');
    icon.setAttribute('height', '20');
    icon.setAttribute('viewBox', '0 0 16 16');
    icon.innerHTML = `
      <path d="M8 0a8 8 0 1 0 8 8A8.01 8.01 0 0 0 8 0Zm3.5 9h-3v3a.5.5 0 0 1-1 0V9H4.5a.5.5 0 0 1 0-1H7V5a.5.5 0 0 1 1 0v3h3a.5.5 0 0 1 0 1Z"/>
    `;

// Yazı
    const label = document.createElement('span');
    label.textContent = 'Oluştur';

// Ekleyelim
    button.appendChild(icon);
    button.appendChild(label);
    app.appendChild(button);

// Ripple efekti JS
    button.addEventListener('click', function (e) {
      const ripple = document.createElement('span');
      ripple.classList.add('ripple');

const rect = this.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      const x = e.clientX - rect.left - size / 2;
      const y = e.clientY - rect.top - size / 2;

ripple.style.width = ripple.style.height = `${size}px`;
      ripple.style.left = `${x}px`;
      ripple.style.top = `${y}px`;
      ripple.style.background = 'rgba(255, 255, 255, 0.5)';
      ripple.style.position = 'absolute';
      ripple.style.animation = `ripple-effect 700ms ease-out`;

this.appendChild(ripple);
      setTimeout(() => ripple.remove(), 700);
    });
  </script>
</body>
</html>

Consigliato

Pulsante Firefly HTML CSS Tailwind

Esempio HTML del pulsante Hover arcobaleno

Pulsante HTML con effetto hover (WEBLEB)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS