botón dom

1,188 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

20 April 2026

Animación del CSS de los botones

26 October 2024

Botón interruptor de luz oscura.

10 February 2025

botón

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>

CSS