botón dom

Abrir en el editor Publica tu código

Recomendado

5 August 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 animado con CSS

Botón de descarga animado

Botón de descarga

HTML

CSS

JS

Recomendado

Botón animado con CSS

Botón de descarga animado

Botón de descarga

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS