Button Effect

by Sebastian Kay

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex justify-center items-center min-w-full min-h-screen bg-gray-950">
  <button id="myButton" class="rounded-lg">Das ist ein Button</button>
</div>

CSS

body {
  background: linear-gradient(-100deg,rgba(10, 26, 41, 1) 0%, rgba(17, 17, 17, 1) 50%, rgba(10, 26, 41, 1) 100%);
}

#myButton {
  /* Basis‑Styling */
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border: none;
  color: #fff;
  background-color: #ff758c;
  
  /* Der Gradient – Zentrum wird über die Variablen gesteuert */
  background-image: radial-gradient(
    circle at attr(data-mouse-x px) attr(data-mouse-y px),
    #ff4d6d 50%,
    #ff7eb3,
    #ff758c
  );
  
  /* Falls du einen sanften Übergang möchtest (funktioniert bei Positionsänderung) */
  transition: background 0.1s ease;
}

JavaScript

const button = document.getElementById('myButton');

// Mausposition relativ zum Button berechnen und die CSS-Variablen setzen
document.body.addEventListener('mousemove', (event) => {
  const rect = button.getBoundingClientRect();
  const x = event.clientX - rect.left;   // X relativ zur linken Kante
  const y = event.clientY - rect.top;    // Y relativ zur oberen Kante
  button.dataset.mouseX = x;
  button.dataset.mouseY = y;
});

// Optional: Beim Verlassen des Buttons den Gradienten auf die Mitte zurücksetzen
button.addEventListener('mouseenter', () => {
  const rect = button.getBoundingClientRect();
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  button.dataset.mouseX = centerX;
  button.dataset.mouseY = centerY;
});