bouton dom

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 September 2024

Onglets HTML avec bouton Fermer

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>

bouton dom

Recommandé

Bouton de connexion

Bouton de changement de thème

Onglets HTML avec bouton Fermer

HTML

CSS

JS

Recommandé

Bouton de connexion

Bouton de changement de thème

Onglets HTML avec bouton Fermer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS