botón dom

Abrir en el editor Publica tu código

Recomendado

13 May 2023

<!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>

botón dom

Recomendado

Botón de descarga animado

Botones de neón

Botón flotante

HTML

CSS

JS

Recomendado

Botón de descarga animado

Botones de neón

Botón flotante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS