Der schüchterne Button (HTML, CSS und Javascript)

Wenn ihr mal eure Webseiten-Besucher ein wenig ärgern wollt, dann habe ich jetzt was Geniales für euch.

Stellt euch vor, ihr habt ein Formular oder einen Button auf eurer Webseite. Wenn ihr nun mit dem Mauszeiger in die Nähe dieses Buttons kommt, dann verschiebt sich der Button und immer wenn ihr in seine Nähe kommt, passiert das Gleiche. Erst wenn ihr den Button in die Ecke drängt, könnt ihr ihn anklicken.

Genau das bauen wir heute.

Video

HTML

<button id="shy-button"><a href="https://example.com" target="_blank" rel="noopener noreferrer">Klick mich!</a></button>

CSS

:root {
  --bg: #1a1a2e;
  --buttonBG: #e94560;
  --buttonBGHover: #ff6b6b;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

#shy-button {
  padding: 16px 32px;
  font-size: 18px;
  font-family: system-ui, sans-serif;
  background: var(--buttonBG);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
  position: absolute;
}

#shy-button:hover {
  background: var(--buttonBGHover);
}

#shy-button a {
  color: inherit;
  text-decoration: none;
}

Javascript

const button = document.getElementById("shy-button");

// Wie nah die Maus ran darf, bevor der Button flieht (in Pixel)
const fleeDistance = 120;
// Wie schnell der Button zurückgleitet (0.01 = langsam, 0.1 = schnell)
const speed = 0.08;

// Startposition: Mitte des Bildschirms
let targetX = window.innerWidth / 2;
let targetY = window.innerHeight / 2;
let currentX = targetX;
let currentY = targetY;

// Button mittig ausrichten per CSS
button.style.left = `${currentX}px`;
button.style.top = `${currentY}px`;
button.style.transform = "translate(-50%, -50%)";

// Wird ständig aufgerufen, solange die Maus bewegt wird
document.addEventListener("mousemove", (e) => {
  // Zentrum des Buttons berechnen
  const buttonCenterX = currentX;
  const buttonCenterY = currentY;

  // Abstand zwischen Button und Mauszeiger (Pythagoras)
  const dx = buttonCenterX - e.clientX;
  const dy = buttonCenterY - e.clientY;
  const distance = Math.sqrt(dx * dx + dy * dy);

  // Wenn Maus zu nah kommt...
  if (distance < fleeDistance) {
    // ...Winkel berechnen, in dem die Maus steht...
    const angle = Math.atan2(dy, dx);
    // ...und den Button in die GEGENÜBERLIEGENDE Richtung stoßen
    targetX = buttonCenterX + Math.cos(angle) * fleeDistance * 1.5;
    targetY = buttonCenterY + Math.sin(angle) * fleeDistance * 1.5;

    // Verhindern, dass der Button außerhalb des Bildschirms landet
    const padding = 80;
    targetX = Math.max(padding, Math.min(window.innerWidth - padding, targetX));
    targetY = Math.max(padding, Math.min(window.innerHeight - padding, targetY));
  }
});

// Animationsschleife: fließend von aktueller Position zur Zielposition bewegen
function animate() {
  // Linear interpolation (Lerp): current += (target - current) * speed
  currentX += (targetX - currentX) * speed;
  currentY += (targetY - currentY) * speed;

  // Position aktualisieren
  button.style.left = `${currentX}px`;
  button.style.top = `${currentY}px`;

  // Nächsten Frame anfragen (für flüssige Animation)
  requestAnimationFrame(animate);
}

// Animation starten
animate();