SnippetUI
← Back to snippets

Botón Magnético

Un componente de botón magnético interactivo que sigue suavemente el cursor del mouse como si fuera atraído magnéticamente.

HTMLCSSJavaScript

Vista previa

Proporciona una interacción única en la que el botón se mueve como si fuera arrastrado por el cursor del mouse. La animación se reproducirá automáticamente inmediatamente después de que el usuario la exhiba.

Casos de uso y características

  • Microinteracción de alto impacto: a diferencia de las animaciones de ruta generales y los efectos de brillo, este componente incorpora el concepto de “fuerza magnética” del seguimiento del mouse.

  • Perfecto para portafolios/sitios creativos: aumente su poder de distribución dándoles a sus visitantes una pequeña sorpresa.

  • Efecto de mejora del CTR: al aplicar esto a los botones CTA (llamado a la acción), se cree que tiene el efecto de reducir los obstáculos psicológicos para mostrar y hacer clic.

  • Logrado solo con JavaScript: no se requiere biblioteca. Una implementación simple que actualiza dinámicamente “transform” en el evento “mousemove”.

Puntos de diseño y UX

  1. Comentarios basados en la física: comunica intuitivamente que un botón es un elemento interactivo creando el riesgo de golpear el cursor.

  2. cubic-bezier(0.23, 1, 0.32, 1): Al usar una curva de tipo fácil, el movimiento del botón parecerá suave y firme.

  3. Efecto brillo: logra el efecto de luz fluida con el pseudoelemento ::before.

  4. Accesibilidad: mouseleave regresa de manera confiable a la posición original, por lo que no hay problemas con el funcionamiento del teclado o los dispositivos táctiles.

Cómo personalizar

Puede ajustar la fuerza de la fuerza magnética cambiando el valor de la variable “fuerza”:


// 弱め（微妙な動き）

var strength = 0.15;



// 標準

// var strength = 0.35;



// 強め（大きく動く）

// var strength = 0.5;

Para cambiar el color del botón, simplemente cambie el CSS de “fondo”:


/* サンセット */

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



/* オーシャン */

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



/* エメラルド */

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

Código de implementación

<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>

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad |

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

| Cromo 60+ | ✅ Totalmente compatible |

| Firefox 55+ | ✅ Totalmente compatible |

| Safari 10.1+ | ✅ Totalmente compatible |

| Borde 79+ | ✅ Totalmente compatible |

El evento mousemove no se activa en dispositivos táctiles, por lo que no se muestra el efecto magnético, pero se puede hacer clic en el botón como de costumbre.