Animated ElementsMagnetic Button for GoHighLevel
A call to action that leans toward the cursor and springs back when it leaves. The label drifts a little further than the button, so the whole thing reads as depth rather than a slide. Point it at an action here, or drop the magnet onto a button you already built and keep every GoHighLevel action it has.
- Controls
- 65
- Variants shown
- 6
- Dependencies
- None
6 ways to run it
Every one of these is the real element with different settings. Press play again to watch any of them from the start.
65 controls, grouped the way you build
- The button20
- Animation4
- The magnet10
- Button shape8
- Text style8
- Button color8
- Background & spacing7
Everything it does
- Button text
- ten click actions with their own fields
- five inline icons with side, gap and hover nudge
- pull strength
- pull radius
- travel cap
- extra label drift
- spring speed and feel
- press squeeze
- lift / glow / sheen hover
- entrance with scroll or load trigger
- full width, on desktop and mobile separately
- button padding, corners, border and tinted shadow
- alignment
- font
- desktop/mobile size
- weight
- letter spacing
- line height
- solid or gradient fill with a hover color
- ghost-button opacity
- text color
- block padding, background + opacity, radius, border
How it actually behaves
Two modes. This button renders the CTA and owns its click: Open popup and Next step ride GoHighLevel's own widget events, and Website URL, Download File, Hide & Show Elements, Scroll to Element, Call, SMS and Email address are handled in the emitted code. An existing button renders nothing at all and magnetises a button matched by the custom class you set in the builder. That one keeps its native Button Actions, including one-click upsells, membership and named steps, which no custom widget can reach.
How to add Magnetic Button to a GoHighLevel page
- 01
Open the element panel
In the page builder, click the + button to add a new element.
- 02
Go to Widget Marketplace
In the left menu, select Widget Marketplace.
- 03
Find Animated Elements
Locate the Animated Elements widget by Funnelslayer in the installed apps list.
- 04
Drag and drop it into the page
Drop the widget where you want it. The Web Widget Settings modal opens on the element gallery: "Select an element to start with".
- 05
Select an element and continue
Choose an element (Animated Counter, Typing Animation, and more), then click Continue. You can switch elements later without losing your settings.
- 06
Customize it
Use the element's settings to customize everything to match your brand. The live preview updates as you go, with separate desktop and mobile views.
Common questions
- Can I animate a button I already built in GoHighLevel?
- Yes. Set Target to "An existing button" and give it the custom class of the button you want to animate. The widget renders nothing itself and the original button keeps all of its native Button Actions, including one-click upsells, membership and named steps.
- Do the animated buttons work with GoHighLevel popups?
- Yes. Open popup and Next step are handled through GoHighLevel’s own widget events, so they behave the same as a native button on funnel steps and two-step order forms.
- What happens on mobile where there is no cursor?
- There is no pointer to follow on a touch screen, so both elements fall back to their mobile treatment rather than sitting still. Sizing, padding and motion are all configured separately for mobile.