SnippetUI
← Back to snippets

Magnetischer Button

Eine interaktive magnetische Tastenkomponente, die dem Mauszeiger sanft folgt, als ob er magnetisch angezogen würde.

HTMLCSSJavaScript

Vorschau

Es bietet eine einzigartige Interaktion, bei der sich die Schaltfläche so bewegt, als würde sie vom Mauszeiger gezogen. Die Animation wird automatisch abgespielt, sobald der Benutzer ausstellt.

Anwendungsfälle und Funktionen

  • Hochwirksame Mikrointeraktion: Im Gegensatz zu allgemeinen Pfadanimationen und Leuchteffekten nutzt diese Komponente das „Magnetkraft“-Konzept der Mausverfolgung.

  • Perfekt für Portfolio-/Kreativseiten: Erhöhen Sie Ihre Vertriebskraft, indem Sie Ihren Besuchern eine kleine Überraschung bereiten.

  • CTR-Verbesserungseffekt: Durch die Anwendung auf CTA-Schaltflächen (Call to Action) wird angenommen, dass die psychologischen Hürden für die Anzeige und das Klicken gesenkt werden.

  • Nur mit JavaScript erreichbar: Keine Bibliothek erforderlich. Eine einfache Implementierung, die „transform“ beim „mousemove“-Ereignis dynamisch aktualisiert.

Design- und UX-Punkte

  1. Physikbasiertes Feedback: Kommunizieren Sie intuitiv, dass eine Schaltfläche ein interaktives Element ist, indem Sie das Risiko erzeugen, den Cursor zu treffen.

  2. Kubik-Bezier(0,23, 1, 0,32, 1): Durch die Verwendung einer Easy-Out-Kurve erscheint die Tastenbewegung glatt und straff.

  3. Schimmereffekt: Erzielen Sie den Effekt von fließendem Licht mit dem Pseudoelement „::before“.

  4. Barrierefreiheit: „mouseleave“ kehrt zuverlässig in die ursprüngliche Position zurück, sodass es keine Probleme mit der Tastaturbedienung oder Touch-Geräten gibt.

So passen Sie es an

Sie können die Stärke der Magnetkraft anpassen, indem Sie den Wert der Variablen „Stärke“ ändern:


// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

Um die Schaltflächenfarbe zu ändern, ändern Sie einfach das „Hintergrund“-CSS:


/* サンセット */

background: linear-gradient(135deg, #f97316, #ef4444);



/* オーシャン */

background: linear-gradient(135deg, #06b6d4, #3b82f6);



/* エメラルド */

background: linear-gradient(135deg, #10b981, #059669);

Implementierungscode

<button class="magnetic-btn" id="magnetic-btn">

HOVER ME

<span class="magnetic-btn-arrow">→</span>

</button>



<style>
.magnetic-btn {

position: relative;

padding: 18px 48px;

font-size: 1.1rem;

font-weight: 700;

letter-spacing: 0.1em;

color: white;

background: linear-gradient(135deg, #6366f1, #8b5cf6);

border: none;

border-radius: 50px;

cursor: pointer;

outline: none;

box-shadow: 0 20px 60px rgba(99,102,241,0.4);

transition: transform 0.15s cubic-bezier(0.23,1,0.32,1), box-shadow 0.3s ease;

display: inline-flex;

align-items: center;

gap: 10px;

overflow: hidden;

}

.magnetic-btn::before {

content: '';

position: absolute;

top: -50%;

left: -60%;

width: 40%;

height: 200%;

background: rgba(255,255,255,0.15);

transform: skewX(-20deg);

transition: left 0.5s ease;

pointer-events: none;

}

.magnetic-btn:hover::before { left: 120%; }

.magnetic-btn:hover {

box-shadow: 0 30px 80px rgba(139,92,246,0.6), 0 20px 60px rgba(99,102,241,0.4);

}

.magnetic-btn-arrow {

display: inline-flex;

transition: transform 0.3s ease;

pointer-events: none;

}

.magnetic-btn:hover .magnetic-btn-arrow { transform: translateX(4px); }
</style>



<script>

(function() {

var btn = document.getElementById('magnetic-btn');

if (!btn) return;

var strength = 0.35;

btn.addEventListener('mousemove', function(e) {

  var rect = this.getBoundingClientRect();

  var dx = e.clientX - (rect.left + rect.width / 2);

  var dy = e.clientY - (rect.top + rect.height / 2);

  this.style.transform = 'translate(' + (dx*strength) + 'px,' + (dy*strength) + 'px) scale(1.08)';

});

btn.addEventListener('mouseleave', function() {

  this.style.transform = '';

  this.style.boxShadow = '';

});

})();

</script>

Browserkompatibilitätsstatus

| Browser | Kompatibilitätsstatus |

|--------|-------|

| Chrom 60+ | ✅ Vollständig kompatibel |

| Firefox 55+ | ✅ Vollständig kompatibel |

| Safari 10.1+ | ✅ Vollständig kompatibel |

| Kante 79+ | ✅ Vollständig kompatibel |

Das Ereignis „mousemove“ wird auf Touch-Geräten nicht ausgelöst, sodass der Magneteffekt nicht angezeigt wird, die Schaltfläche jedoch wie gewohnt anklickbar ist.