3D रिपल यूआई

अनुशंसित

1 August 2024

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Gelişmiş Ripple UI</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
    :root {
      --bg: #0d1117;
      --fg: #ffffff;
      --glass: rgba(255, 255, 255, 0.05);
      --blur: 15px;
    }

body.light {
      --bg: #f5f5f5;
      --fg: #222;
      --glass: rgba(0, 0, 0, 0.05);
    }

* {
      box-sizing: border-box;
    }

body {
      margin: 0;
      height: 100vh;
      background: var(--bg);
      color: var(--fg);
      font-family: 'Segoe UI', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, color 0.3s;
    }

.container {
      display: flex;
      gap: 20px;
      padding: 20px;
      background: var(--glass);
      border-radius: 16px;
      backdrop-filter: blur(var(--blur));
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

.btn-glass {
      position: relative;
      overflow: hidden;
      padding: 14px 24px;
      font-size: 16px;
      border: none;
      border-radius: 10px;
      background: var(--glass);
      color: var(--fg);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: transform 0.2s;
    }

.btn-glass:hover {
      transform: translateY(-2px);
    }

.btn-glass .fa {
      font-size: 18px;
    }

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

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

/* Tooltip */
    .btn-glass::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 130%;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      white-space: nowrap;
    }

.btn-glass:hover::after {
      opacity: 1;
    }

/* Dark Mode Toggle */
    .toggle-mode {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--glass);
      padding: 10px 14px;
      border-radius: 12px;
      cursor: pointer;
      font-size: 18px;
      color: var(--fg);
      transition: 0.3s;
    }

.loading .fa {
      animation: spin 1s linear infinite;
    }

@keyframes spin {
      0% { transform: rotate(0); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>

buttons.forEach(({ icon, text, color, tooltip }) => {
    const btn = document.createElement("button");
    btn.className = "btn-glass";
    btn.style.color = color;
    btn.setAttribute("data-tooltip", tooltip);

const i = document.createElement("i");
    i.className = `fa ${icon}`;
    btn.appendChild(i);

const span = document.createElement("span");
    span.textContent = text;
    btn.appendChild(span);

// Ripple
    btn.addEventListener("click", e => {
      sound.currentTime = 0;
      sound.play();

// Ripple
      const ripple = document.createElement("span");
      ripple.className = "ripple";
      const rect = btn.getBoundingClientRect();
      const size = Math.max(rect.width, rect.height);
      ripple.style.width = ripple.style.height = `${size}px`;
      ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
      ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
      ripple.style.animation = "ripple-effect 600ms ease-out";
      btn.appendChild(ripple);
      setTimeout(() => ripple.remove(), 600);

// Loading simülasyonu
      const iconEl = btn.querySelector(".fa");
      const originalClass = iconEl.className;
      iconEl.className = "fa fa-spinner";
      btn.classList.add("loading");

setTimeout(() => {
        iconEl.className = originalClass;
        btn.classList.remove("loading");
      }, 1500);
    });

app.appendChild(btn);
  });

// Dark Mode Toggle
  const modeBtn = document.getElementById("modeBtn");
  modeBtn.addEventListener("click", () => {
    document.body.classList.toggle("light");
    const icon = modeBtn.querySelector("i");
    icon.className = document.body.classList.contains("light") ? "fa fa-sun" : "fa fa-moon";
  });
</script>

</body>
</html>

3D रिपल यूआई

अनुशंसित

उत्पाद कार्ड यूआई डिज़ाइन

यूआई एनीमेशन उत्पादों की खोज

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

HTML

CSS

JS

अनुशंसित

उत्पाद कार्ड यूआई डिज़ाइन

यूआई एनीमेशन उत्पादों की खोज

3D लॉगिन साइनअप बॉक्स HTML CSS डिज़ाइन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS