Animated ElementsSpotlight Button for GoHighLevel
A light travels across the button under the cursor, and the label inverts as it passes underneath, so the text stays readable on the button and on the light without anyone picking a second colour. Built for dark buttons, and it earns its place on one.
- Controls
- 66
- 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.
66 controls, grouped the way you build
- The button20
- Animation4
- The spotlight10
- Button shape9
- Text style8
- Button color8
- Background & spacing7
Everything it does
- Same click actions and the same attach mode as the Magnetic Button. Light color, size, strength and edge softness
- follows left-to-right or in every direction
- sits centred at rest or stays hidden until hover
- follow and recentre speeds
- text inversion on or off
- press squeeze
- minimum width so the light reads as a spot
- button text
- ten click actions with their own fields
- five inline icons
- 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 to add Spotlight 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.