Kinetic Magnetic Button

Overview

Kinetic Magnetic Button creates an animated call-to-action link that moves subtly toward the visitor’s pointer.

Use it for:

• Hero calls to action
• Pricing buttons
• Product links
• Downloads
• Contact actions
• Portfolio links
• External resources
• Cart actions
• Demo buttons

The button remains a normal accessible link. The magnetic movement is a visual enhancement applied on supported desktop pointer devices.

Add the block

1. Open a page or post in Gutenberg
2. Search for Kinetic Magnetic Button
3. Insert the block
4. Edit the button label directly
5. Add the destination URL
6. Configure the magnetic behavior
7. Add an optional icon or status indicator
8. Adjust colors, border, shadow, spacing, and typography
9. Update the page
10. Test the interaction on the frontend

The editor displays the visual design, but the full pointer-following interaction runs on the published frontend.

Button text

Click the text inside the button to edit it.

The default label is:

Discover More

Use short, action-oriented text such as:

• View Pricing
• Start a Project
• Download File
• Watch Demo
• Explore Features
• Add to Cart

Avoid vague labels when a more descriptive action is available.

Link settings

Configure:

• Destination URL
• Open in New Tab
• Link Rel

Destination URL

Enter the page, file, product, section, or external destination.

Replace the default # value before publishing the button.

Open in New Tab

Opens the destination in a separate browser tab.

When enabled, KineticHub automatically adds:

• noopener
• noreferrer

to the link relationship for safer external navigation.

Link Rel

Add optional relationship values such as:

• nofollow
• sponsored
• ugc

Separate multiple values with spaces.

Magnetic interaction

The magnetic engine measures the pointer relative to the button and moves the button toward it while the pointer is within the configured detection area.

Magnetic Strength

Controls how strongly the button moves toward the pointer.

Available range:

0.1–1.0

Default:

0.3

Lower values create a restrained movement.

Higher values allow the button to travel farther toward the pointer.

For most calls to action, begin around:

0.2–0.4

Strong values require more surrounding space and may be clipped by a parent container.

Detection Range

Controls how close the pointer must be before magnetic movement begins.

Available range:

10–200 px

Default:

60 px

A smaller range activates only when the pointer is close to the button.

A larger range makes the button react earlier.

Increasing the range does not increase the movement strength. It only enlarges the activation area.

Text Separation

Moves the inner text and icon separately from the button background.

This creates a layered parallax effect.

Disable it when:

• The button should move as one solid unit
• The icon alignment feels too active
• The label must remain visually stable
• Several nearby effects already use movement

Hover Scale

Slightly enlarges the button while it is active.

Disable it when:

• The button is inside a tightly spaced row
• Scaling creates overlap
• A PRO hover effect already provides enough movement
• A parent clips the button edges

Touch devices and reduced motion

The magnetic tracking engine is disabled when:

• The visitor requests reduced motion
• The device reports a coarse pointer, such as a touchscreen

The button remains visible and clickable in a static state.

Do not rely on magnetic movement to communicate the purpose of the link.

Outline Mode

Enable Outline Mode to create a transparent button with a colored border and text.

When Outline Mode is active:

• The normal background becomes transparent
• The selected background color becomes the outline and text color
• A border width of 0 is automatically displayed as 2 px
• The normal box shadow is not applied
• Hover colors can fill or recolor the button

Outline Mode is useful over:

• Hero images
• Dark backgrounds
• Minimal layouts
• Secondary calls to action

Normal and hover colors

Configure:

• Background Color
• Text Color
• Hover Background Color
• Hover Text Color
• Border Color
• Hover Border Color

When a hover color is not selected, the normal-state value is reused.

In Outline Mode, the background color also acts as the normal outline color.

Always check:

• Text contrast
• Hover contrast
• Focus visibility
• Contrast over glass or transparent backgrounds

Glassmorphism

Enable Glassmorphism to add a translucent, blurred-glass appearance.

It works best when the button is placed over:

• An image
• A gradient
• Hero Mesh
• Ambient Aura
• Another visible background layer

Glassmorphism may appear almost unchanged over a plain solid background because there is little visual content behind it to blur.

The global KineticHub glass intensity can influence the backdrop blur used by the effect.

Pulse animation

Enable Pulse Animation to add continuous emphasis around the button.

Use it for one important action rather than every button on the page.

Pulse animation also remains available with Outline Mode.

Avoid combining pulse with several other strong continuous effects.

Icons

Enable Show Icon to add an icon beside the button text.

Available icons:

• Arrow
• Chevron
• Play
• Plus
• Download
• External
• Cart
• Check

Icon Position

Choose:

• Left
• Right

Use an icon that matches the action.

Examples:

• Play for video
• Download for files
• External for external resources
• Cart for purchasing
• Check for confirmation
• Arrow or Chevron for navigation

Icon Size

Controls the desktop icon size.

Available range:

10–100 px

Default:

16 px

Keep the icon proportional to the text and button padding.

Mobile Icon Size

Sets a separate icon size for smaller screens.

Available range:

10–100 px

When no mobile value is provided, the desktop icon size is reused.

Show Icon in Normal State

When enabled, the icon remains visible before interaction.

When disabled, the icon can remain hidden or offset until the button enters its hover state.

Enable it when the icon is important for understanding the action.

Status indicators

Enable Show Status Indicator to add a small visual marker.

Available types:

• Dot
• Radar
• Sparkles
• Badge

Dot

Displays a simple circular status marker.

Use it for:

• Available
• Online
• Live
• Active

Radar

Displays an animated radar-style marker.

Use it sparingly for live or active states.

Sparkles

Adds a decorative sparkle indicator.

It is best suited to:

• New features
• Premium content
• Special offers
• Featured actions

Badge

Displays a small text badge.

The default badge text is:

New

Configure:

• Badge Text
• Badge Text Color
• Status or indicator color

Keep badge text short so it does not crowd the button label.

Examples:

• New
• Pro
• Live
• Beta
• Sale

Icons and status indicators can be enabled together, but the button may become crowded on small screens.

Border controls

Configure:

Border Width

Available range:

0–20 px

Default:

0 px

Border Style

Available styles:

• Solid
• Dashed
• Dotted
• Double

Border Color

Controls the normal-state border.

Hover Border Color

Controls the border during hover.

Border Radius

Available range:

0–100 px

Default:

50 px

Typical uses:

• 0–8 px for sharp or technical buttons
• 12–24 px for rounded rectangles
• 40–100 px for pill-style buttons

Shadow controls

Enable Shadow to display a normal and hover box shadow.

Outline Mode does not use the normal button shadow.

Normal shadow

Configure:

• Shadow Color
• Horizontal Offset
• Vertical Offset
• Blur
• Spread

Available ranges:

• Horizontal Offset: -50–50 px
• Vertical Offset: -50–50 px
• Blur: 0–100 px
• Spread: -50–50 px

Defaults:

• X: 0
• Y: 8
• Blur: 24
• Spread: 0

Hover shadow

Configure the same values for the active hover state.

Defaults:

• X: 0
• Y: 15
• Blur: 30
• Spread: 0

A larger Y offset and blur create a stronger floating appearance.

Avoid excessive shadow spread when the button is inside a container with hidden overflow.

Spacing and size

Vertical Padding

Controls the space above and below the button content.

Available range:

0–100 px

Default:

18 px

Horizontal Padding

Controls the space on the left and right.

Available range:

0–150 px

Default:

40 px

Reduce horizontal padding on mobile when the button contains:

• A long label
• An icon
• A status indicator
• A badge

Desktop Font Size

Available range:

0–100 px

Default:

16 px

A value of 0 allows the button to inherit the relevant typography size.

Mobile Font Size

Available range:

1–100 px

When unset, it inherits the desktop button size.

Typography

Kinetic Magnetic Button also supports WordPress typography controls, including:

• Font family
• Font weight
• Font style
• Line height
• Letter spacing
• Text transform
• WordPress font-size presets

Use the dedicated desktop and mobile size controls when you need explicit responsive sizing.

Avoid combining extremely large font sizes with icons, badges, and narrow parent columns.

Button alignment

Position the button within its available container:

• Left
• Center
• Right

This is a custom KineticHub alignment control.

The final position is still limited by the parent Group, Column, Row, or template container.

The block also supports WordPress margin controls.

Internal button padding is controlled through the KineticHub spacing settings rather than WordPress block padding.

KineticHub PRO hover effects

KineticHub PRO adds a Hover Effect selector.

Available effects:

• None
• Shine
• Sweep Right
• Sweep Left
• Sweep Top
• Sweep Bottom
• Lift Up
• Push Down
• Ripple
• Glitch
• Outline In

None

Uses the normal color, border, shadow, scale, and magnetic transitions without an additional animated overlay.

Shine

Moves a light streak across the button.

Works well for polished calls to action and dark backgrounds.

Sweep Right, Left, Top, and Bottom

Reveals the hover layer from the selected direction.

Use a hover background color that contrasts clearly with the normal state.

Lift Up

Adds an upward-moving hover treatment.

Avoid combining it with very strong magnetic movement inside a clipped container.

Push Down

Creates a pressed or downward-moving interaction.

It works well for tactile button designs.

Ripple

Expands a ripple-style visual layer during interaction.

Glitch

Adds a brief digital offset or glitch treatment.

Use it selectively because rapid visual changes can become distracting.

Outline In

Introduces an inward outline-style hover transition.

It works best when the normal and hover border colors are visibly different.

Ghost Text Hover — PRO

Adds a secondary ghosted text treatment during hover.

Use it for stylized hero or campaign buttons.

Keep the original label readable throughout the interaction.

Neon Glow — PRO

Adds a luminous neon-style glow around the button.

It works best on dark backgrounds with a bright accent color.

Avoid combining:

• High-opacity shadow
• Neon Glow
• Pulse
• Strong glassmorphism

at maximum strength on the same button.

Stretched Link — PRO

Stretched Link extends the button’s clickable link area across its nearest suitable parent container.

Use it when the Magnetic Button appears inside:

• A pricing card
• A feature card
• A product panel
• A service box

The parent should provide a suitable positioning context, normally through:

position: relative

Only one stretched link should control a card.

Avoid using it when the same parent contains other independent links, buttons, audio controls, video controls, or form fields.

Entrance animation — PRO

Available entrance animations:

• None
• Fade
• Slide
• Zoom

The animation begins when the button enters the viewport.

Entrance Delay

Available range:

0–10 seconds

Keep the delay short so visitors do not mistake the button for missing content.

Entrance animations are bypassed when reduced motion or coarse-pointer static behavior is active.

Responsive visibility — PRO

KineticHub PRO adds:

• Hide on Mobile
• Hide on Desktop

These settings hide the complete button at the relevant responsive width.

Do not hide the only important call to action without providing an alternative.

Editor and frontend behavior

Gutenberg displays:

• Text
• Icons
• Status indicators
• Colors
• Border
• Shadow
• Spacing
• Approximate hover styling

The full magnetic pointer tracking runs on the frontend.

Always test:

• Normal state
• Hover state
• Keyboard focus
• Link destination
• Desktop pointer movement
• Mobile tap behavior
• Reduced motion

Accessibility

Kinetic Magnetic Button renders as a standard link.

It supports normal:

• Keyboard focus
• Enter-key activation
• Browser link behavior
• New-tab behavior
• Link relationship attributes

Icons and decorative indicators are hidden from assistive technologies.

Use descriptive text that explains the destination.

Do not rely only on:

• Icon type
• Color
• Magnetic movement
• Glow
• Badge
• Hover effect

to explain what the button does.

Performance

The frontend uses shared pointer tracking for all Magnetic Button instances.

Animation updates are limited to buttons that are near or inside the viewport.

When buttons are dynamically removed, their observers and interaction handlers are cleaned up.

For best results:

• Use magnetic buttons for important actions
• Avoid filling navigation menus with them
• Keep effects restrained
• Avoid stacking many continuous pulse or neon effects
• Test lower-powered mobile devices

Recommended starting settings

For a clean primary call to action:

• Magnetic Strength: 0.3
• Detection Range: 60 px
• Text Separation: Enabled
• Hover Scale: Enabled
• Border Radius: 50 px
• Vertical Padding: 16–20 px
• Horizontal Padding: 32–44 px
• Desktop Font Size: 16–18 px
• Shadow: Enabled
• Pulse: Disabled
• Icon: Arrow or Chevron
• Icon Size: 16–20 px

For a restrained secondary button:

• Outline Mode: Enabled
• Magnetic Strength: 0.2
• Detection Range: 40–60 px
• Hover Scale: Disabled
• Text Separation: Disabled
• Moderate hover background color
• No continuous pulse

Troubleshooting

The button does not move

Check:

• You are testing the public frontend
• The pointer is within the Detection Range
• Reduced Motion is disabled
• The device has a mouse or fine pointer
• Parent CSS does not override transform
• Frontend JavaScript is loading

The button moves too far

Reduce Magnetic Strength.

You can also reduce Detection Range so the effect activates closer to the button.

The button activates from too far away

Reduce Detection Range.

The button is clipped while moving

Inspect the parent for:

• overflow: hidden
• overflow: clip
• Fixed width
• Fixed height
• Rounded clipping
• Transforms

Reduce the magnetic strength or allow additional space around the button.

The icon is misaligned

Check:

• Icon Size
• Mobile Icon Size
• Icon Position
• Font size
• Line height
• Custom theme SVG styles
• Parent button styles

Test the default icon size before applying a large value.

The icon is missing before hover

Enable Show Icon in Normal State.

The status indicator is not visible

Check:

• Show Status Indicator is enabled
• Indicator color contrasts with the button
• Badge text is not empty
• Custom CSS does not hide the indicator
• Reduced motion is not removing an animated decoration

The shadow is missing

Check:

• Shadow is enabled
• Outline Mode is disabled
• Parent overflow does not clip the shadow
• Shadow color is visible against the background

Glassmorphism looks unchanged

Place the button over a visible image, gradient, or colored background.

Backdrop blur is difficult to see over a flat background.

The PRO hover effect does not run

Confirm:

• KineticHub PRO is active
• A Hover Effect other than None is selected
• Hover colors are configured
• Reduced Motion is disabled
• You are testing with a mouse
• Optimized CSS has not removed the effect classes

Stretched Link blocks other controls

Do not use Stretched Link inside a parent containing several independent interactive elements.

Disable it or reorganize the card structure.

The editor button is static

This is intentional.

The editor shows the design while full magnetic tracking runs on the frontend.

Next step

Continue with Kinetic Marquee to create continuously scrolling image or logo bands with direction, speed, spacing, pause behavior, and advanced PRO interactions.