What it does
The button renders a lightweight canvas background that cycles color smoothly while your text stays sharp and readable. You control the label, link, text color, width, and font size from the block sidebar. The preview in the editor matches the front end, so what you see is what you get.
Why it helps conversions
MotionHue is designed to catch attention without feeling noisy. The subtle motion highlights the next step you want visitors to take, which makes CTAs more noticeable on long pages, landing pages, or pricing sections.
Fast and lightweight
There are no external dependencies. The animation runs on a small canvas and respects the user’s device performance. It works well on modern browsers and degrades gracefully if scripts are blocked.
Built for the block editor
Add the MotionHue block like any other block, then adjust settings in the Inspector. Change button text, set a URL, pick a text color, choose a width in pixels, and set the font size. You do not need to edit code.
Works with your theme
MotionHue adopts your site’s typography and spacing. You can place it inside groups, columns, and patterns, and it will align and center like a normal block. It plays nicely with both classic and block themes.
Common use cases
Use MotionHue for hero CTAs, newsletter signups, product trials, contact prompts, event registrations, and portfolio links. It is also effective at the end of blog posts where readers need a clear next action.
Accessibility and readability
The animated layer sits behind the text. You control text color and size to maintain contrast. Keep labels short and clear, and avoid placing multiple animated buttons side by side on small screens.
Editor tips
Keep width only as wide as the label needs. Larger font sizes read better on mobile. If you use multiple MotionHue buttons on a page, vary their width or placement so the primary CTA stands out.
Performance tips
Limit the number of animated buttons on a single view. If a page already includes heavy media, use one MotionHue CTA above the fold and a standard button below the fold.
Installation
Upload and activate the plugin, then open any page in the block editor. Insert the “MotionHue Button” block, set your link, adjust text color, width, and font size, then publish.
Support and documentation
Documentation covers installation, settings, and theme compatibility. If you need help, provide your WordPress version, theme name, and a link to the page where the button appears so issues can be reproduced quickly.
FAQ
Q: Can I keep a featured image on the page but hide it from the top of the content?
A: Yes. Many themes have a toggle to hide the featured image on single pages. You can also use a small CSS rule or a plugin that hides featured images while keeping them set for meta.
Q: Will it work with page builders?
A: MotionHue is a Gutenberg block. It works anywhere blocks are supported. For non-block builders, place it on block-based pages or templates.
Q: Can I customize the animation style?
A: The current version uses a smooth color cycle that is optimized for clarity and performance. Advanced animation options are planned for a future release.