Effects · Gutenberg
Magnetic Button block for WordPress
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Inspector panels on this block: Button Content, Magnetic Effect. Those titles come from index.js, not from a shared template.
Behavior controls: “Sub-text (optional)” (Smaller text shown below main label); “Link target” options: Same tab, New tab; “Button style” options: Filled, Outline, Ghost (no border); “Style — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Magnetic Button” (block name `blockenberg/magnetic-button` in block.json). Style it in the sidebar after insert.
How to use Magnetic Button block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Magnetic Button”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Button Content. Set “Sub-text (optional)”, “Link URL”, “Link target”, “Show arrow icon”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Sub-text (optional) | Text field in the inspector. Smaller text shown below main label. Saved as `subtext`. |
| Link URL | Text field in the inspector. Saved as `href`. |
| Link target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `target`. |
| Show arrow icon | On/off toggle in the inspector. Off by default. Saved as `showArrow`. |
| Magnetic pull strength (px) | Numeric range control in the inspector. Range 0–100. block.json default: 40. Saved as `magnetStrength`. |
| Activation radius (px) | Numeric range control in the inspector. Range 40–400. block.json default: 120. Saved as `magnetRadius`. |
| Click ripple effect | On/off toggle in the inspector. On by default. Saved as `ripple`. |
| Button style | Select control; the chosen value is saved on the block. Options: Filled; Outline; Ghost (no border). block.json default: filled. Saved as `buttonStyle`. |
| Style — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Padding horizontal | Numeric range control in the inspector. Range 12–100. block.json default: 40. Saved as `paddingX`. |
| Padding vertical | Numeric range control in the inspector. Range 6–60. block.json default: 18. Saved as `paddingY`. |
| Border radius | Numeric range control in the inspector. Range 0–999. block.json default: 999. Saved as `borderRadius`. |
| Border width (px) | Numeric range control in the inspector. Range 0–8. block.json default: 2. Saved as `borderWidth`. |
| Button background | Color control in the inspector. block.json default: #6366f1. Saved as `btnBg`. |
| Button text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Border color | Color control in the inspector. block.json default: #6366f1. Saved as `btnBorderColor`. |
| Hover background | Color control in the inspector. block.json default: #4f46e5. Saved as `hoverBg`. |
| Hover text | Color control in the inspector. block.json default: #ffffff. Saved as `hoverColor`. |
| Ripple color | Color control in the inspector. block.json default: rgba(255,255,255,0.35). Saved as `rippleColor`. |
| Shadow / glow | Color control in the inspector. block.json default: rgba(99,102,241,0.4). Saved as `shadowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect — that is the job of Magnetic Button, not a generic content block.
- Use it when you need the editor control labeled “Sub-text (optional)”, which exists on this block’s inspector.
- It matches pages about magnetic, button, hover.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Magnetic Button block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Magnetic Button”. It sits under Effects. After insert, open Button Content and set “Sub-text (optional)”, “Link URL”, “Link target”, “Show arrow icon”.
What makes Magnetic Button different from other Blockenberg blocks?
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect. Inspector labels on this block include “Sub-text (optional)”, “Link URL”, “Link target”, “Show arrow icon”.
Is the Magnetic Button Gutenberg block free?
Yes. Magnetic Button ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Magnetic Button to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Button Content, Magnetic Effect).
Related effects blocks
Mouse Trail
Add a magical cursor trail effect to your page — sparkles, dots, comets, ribbons, stars, or fire. Works globally across the page or scoped to a specific section. No dependencies, pure canvas.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Magnetic Button from the Gutenberg inserter.