Magnetic Physics Pill Button

Colours in this gradient

• #0f172a
• #3b82f6
• #60a5fa
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="mag-stage">
  <div class="mag-zone" id="magZone">
    <button class="mag-btn" id="magBtn">
      <span class="mag-text" id="magText">Schedule Private Demo</span>
      <span class="mag-arrow">→</span>
    </button>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create an interactive magnetic attraction button in HTML, CSS and vanilla JavaScript.

Requirements:
- Invisible hover zone around button tracking mousemove delta from center.
- Button translates towards cursor with elastic attraction (dx * 0.35).
- Internal label translates with secondary parallax offset (dx * 0.15).
- Smooth cubic-bezier return to origin on mouseleave.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Wrap button in a larger zone container to detect mouse proximity.

2. 2

   Calculate relative delta dx and dy from zone center.

3. 3

   Apply transform: translate() on mousemove and reset on mouseleave.

Customisation tips

• Moving internal text with a slightly lower multiplier creates subtle depth parallax.

More components