Skip to content

component

MagneticButtonV1

By Noel Dario Andres

Details

Summary

Physics-based magnetic hover button.

Description

The ultimate micro-interaction for premium websites. A magnetic button is the hallmark of modern, high-end web design. This component brings that organic, Awwwards-winning interaction right into your Framer projects. As the cursor approaches, the button subtly pulls towards it, creating a playful and satisfying user experience. Component Highlights: Physics-Engine: Built with Framer Motion springs for realistic, bouncy physics that feel natural. Plug & Play: No coding required. Drop it onto your canvas and it works instantly. Fully Customizable: Adjust the text, colors, border radius, and padding to fit any design system. Adjustable Magnetism: Control exactly how strong the magnetic pull should be using a simple slider. Hover & Tap States: Includes smooth scaling effects when hovered or clicked for extra tactile feedback. How to use: Copy the component from the Remix link to your project. Drag it onto your page. Use the right sidebar to change the button text, links, and brand colors. Preview the site and move your mouse over the button!

Introduction

Physics-based magnetic hover button.

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750185408/148/228/309/79/15
  • All · #8362