Magnetic Button
Le bouton suit le curseur avec un effet d'attraction magnétique.
Le code
Un aperçu du code source :
style.css
.demo-btn {
padding: 16px 32px;
font-size: 1rem;
font-weight: 600;
border-width: medium;
border-style: none;
border-color: currentcolor;
border-image: initial;
border-radius: 12px;
cursor: pointer;
🔒 Débloquer le code complet
HTML + CSS + JS complet, prêt à coller — avec 800 autres effets Premium.
Cas d'usage concrets
Quelques contextes où Magnetic Button fait mouche :
- Un bouton de téléchargement d'app
- L'action principale d'un formulaire de contact
- Le bouton principal d'une page de vente
Comment ça marche
CSS + un petit script JavaScript vanilla (aucune dépendance).
À personnaliser
Tu peux régler :
- les couleurs, la taille et le timing directement dans le CSS
Intégrer en 3 étapes
- Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
- Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
- Ajoute le petit script JavaScript avant </body> — c'est prêt.
Compatibilité navigateur
Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.
Plus d'effets Boutons
Voir tous les effets Boutons →FAQ
Le code est-il gratuit ?
Cet effet fait partie de la bibliothèque Premium (801 effets, code prêt à coller). Environ 70 effets sont gratuits.
Comment l'intégrer à mon projet ?
Copie le HTML, le CSS et le JS et colle-les. Aucune dépendance, compatible tous frameworks.
Fonctionne sur mobile ?
Oui — les effets sont responsive et se dégradent proprement.