RSK World - Magnetic Button Effect | Interactive Buttons, Mouse Following, Physics & Particles | RSK World

Magnetic & Mouse Particles & Sounds Config & Presets Performance & Showcase Vanilla JS

Magnetic Button Effect is an interactive button demo with physics-based mouse attraction. Features: MagneticButton and MagneticButtonManager (script.js), strength/distance/smoothness controls, particle effects (sparkle, fire, ice, magic, toxic) via particles.js, Web Audio sound effects (sounds.js), configuration panel with presets (Gentle, Balanced, Powerful, Minimal, Playful), performance monitor, and advanced showcase (showcase.html) with 3D/liquid/neon/holo styles. Files: index.html, showcase.html, style.css, showcase.css, script.js, main.js, particles.js, sounds.js, config-panel.js, performance-monitor.js, showcase.js. By rskworld.in.

If you find this Magnetic Button Effect project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Magnetic Button Effect

Magnetic Button & Physics

MagneticButton class in script.js: mouseenter/mouseleave and mousemove on wrapper. Force from wrapper center to cursor; within distance threshold, targetX/Y computed with (1 - distance/distance) * strength. Lerp current position toward target with smoothness; transform translate applied each frame. MagneticButtonManager initializes all .magnetic-btn and syncs strength/distance/smoothness sliders.

MagneticButton: element, wrapper, options (strength, distance, smoothness)
handleMouseMove: deltaX/deltaY, distance, force scaling
animate(): lerp currentX/Y to targetX/Y, requestAnimationFrame loop
Touch support: touchstart, touchend, touchmove mapped to mouse events

Project Structure & Files

magnetic-button/ with index.html (main demo), showcase.html (Basic, Advanced, Creative, Experimental sections), style.css and showcase.css, script.js (MagneticButton, MagneticButtonManager), main.js (MagneticButtonApp), particles.js, sounds.js, config-panel.js, performance-monitor.js, showcase.js. No build step. Open index.html or serve folder.

magnetic-button/ – index.html, showcase.html, style.css, script.js, main.js, particles.js, sounds.js, config-panel.js, performance-monitor.js, showcase.js, README.md
No build step – open index.html or static server
Font Awesome 6 (CDN) for icons
Zero dependencies; vanilla HTML, CSS, JavaScript

Config Panel & Presets

Configuration panel (config-panel.js): presets (Gentle, Balanced, Powerful, Minimal, Playful), sliders for strength/distance/smoothness, particle effect type, sound toggle and volume, hover/click scale, return duration, border radius, shadow and glow. Export/reset config. main.js wires configChanged and presetChanged to update buttons and toggles.

Presets: gentle, balanced, powerful, minimal, playful
ConfigurationPanel: createPanel(), applyPreset(), updateConfig()
CSS variables updated from config (--magnetic-strength, etc.)
updateControlsFromConfig() syncs main page sliders and checkboxes

Particles & Sounds

Particles (particles.js): ParticleSystem with canvas, stream on hover, gravity and life. MagneticParticleEffects: sparkle, fire, ice, magic, toxic with color palettes. Buttons use data-particles attribute. Sounds (sounds.js): Web Audio hover, click, attract, release, success, error, magic; SoundEffectsManager with enable/disable and volume.

ParticleSystem: burst(), stream(), createParticle(), animate() loop
Effect types: sparkle, fire, ice, magic, toxic (colorPalette per type)
SoundEffectsManager: createWhooshSound, createTapSound, createChimeSound, etc.
main.js: initializeParticleEffects(), playSound() on hover/click

Main App & Showcase

MagneticButtonApp (main.js) initializes MagneticButtonManager, initSoundEffects, initPerformanceMonitor, ConfigurationPanel, particle effects per data-particles, and button interactions (ripple, stats). ShowcaseManager (showcase.js) handles section nav, initializes all magnetic buttons and particle systems, playground for custom button, and export.

MagneticButtonApp: initializeComponents(), setupButtonInteractions(), setupControlSliders()
Keyboard shortcuts: Ctrl+, config, Ctrl+P performance, Ctrl+S sound, Ctrl+E export
Showcase: Basic, Advanced (particles), Creative (3D/liquid/neon/holo), Experimental
Playground: text, style, strength, distance, particle effect; updatePreviewButton()

What You Get

Static HTML/CSS/JS: magnetic-button/ folder with index.html, showcase.html, style.css, showcase.css, script.js, main.js, particles.js, sounds.js, config-panel.js, performance-monitor.js, showcase.js, README.md. No build step. Open index.html or serve folder.

Complete source – magnetic-button/ with HTML, CSS, JS
No build step – open index.html or static server
README.md included with API and usage
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html. Move mouse near buttons to see magnetic attraction. Use sliders for strength, distance, smoothness; toggles for sound and particles. Configuration button opens panel with presets. Performance button shows FPS/score. showcase.html for advanced examples and playground.

magnetic-button/index.html – main page with controls and stats
script.js: MagneticButton, MagneticButtonManager
Accessibility: keyboard nav, screen reader friendly, touch support
Author: RSK World | rskworld.in

Project Features

Mouse-following magnetic buttons, physics-based movement, particle effects (sparkle, fire, ice, magic, toxic), Web Audio sounds, config panel with 5 presets, performance monitor, ripple on click, keyboard shortcuts, showcase with creative button styles (3D, liquid, neon, holographic, gravity, etc.).

Magnetic effect – strength, distance, smoothness, return animation
Config panel – presets, sliders, checkboxes, export/reset
Particles – canvas stream on hover, 5 effect types
Showcase – tabbed sections, playground, stats

Credits & Acknowledgments

Magnetic Button Effect by RSK World. Interactive magnetic buttons with physics-based mouse attraction, particle effects, and config panel for learning vanilla JS and UI design.

Magnetic Button Effect – magnetic attraction, particles, sounds, config
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: help@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.