Skip to main content

Button Hover Effects

GlobalButtonFx Backgrounds & Effects JavaScript

Site-wide button hover effects: slide fill, magnetic lift, glow pulse, icon shift or 3D tilt.

Published · by Christopher Alberto

Live demo

Open full screen

At a glance

Component
GlobalButtonFx
Category
Backgrounds & Effects
Used as
Global button hover effect (Appearance)
Built with
PHP, Twig, JavaScript
Platform
WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

A site-wide interaction layer for every button. It wraps trailing arrow glyphs (like “→”) so they can animate independently, and applies the chosen hover effect — including cursor-following ones.

How to enable

Not a page block: choose it under Global Options → Button Effect → Button Hover Effect (Slide Fill, Magnetic Lift, Glow Pulse, Icon Shift, 3D Tilt or None). Use the effect tabs in the live demo to compare them.

Options

This component isn't added as a page block, so it has no per-page fields — see "About this component" for where it is configured.

Under the hood

Components/GlobalButtonFx/

  • functions.php Fields & data (PHP) 3 lines
  • index.twig Markup (Twig) 1 lines
  • script.js Behaviour (JavaScript) 74 lines

Share this component
Christopher Alberto

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub

Related components