How to Create an Animated Gradient Button in WordPress

Before you start

The snippet needs HTML and CSS only. It uses interaction-triggered motion instead of an automatically looping animation, so there is no pause script to install. Visitors with reduced motion receive the same link without its movement. Test the destination and readable label before spending time on the color treatment.

How the button works

The anchor is an inline-flex element, which keeps the label and decorative star aligned. Padding gives it a comfortable clickable area. A rounded shape and a restrained shadow separate it from the surrounding page. The accompanying paragraph is informational text, not part of the action.

The background contains four color stops. The first purple repeats at the end to make the color flow feel coherent. A background size of 250 percent gives the hover transition somewhere to move. The hover and :focus-visible selectors change background-position and apply a small translate transform.

The root’s --iljs-speed value controls the background transition. The transform has its own shorter 0.2-second transition, so the button responds promptly while its color shifts slowly. These are CSS transitions rather than keyframe loops. No click handler is needed: the browser follows the link normally.

Install it in WordPress

1. Add a Custom HTML block where your call to action belongs. Paste the HTML fragment, including the .iljs-gradient-button wrapper.
2. Replace the anchor’s href with a real page, file, or external destination. Change the label to describe that destination clearly.
3. Install the scoped CSS in your theme’s available custom CSS area or approved stylesheet. The WordPress custom CSS guide describes the common paths.
4. Remove or rewrite the sample caption. It should help your visitors rather than describe the demo implementation.
5. Save and open the front-end preview. Activate the link, return to the page, and then inspect hover and keyboard focus states.

A block theme or classic theme can use page-level Custom HTML when allowed. Elementor can use an HTML widget with the same wrapper and styles. If your restricted account cannot save embedded style elements, install the CSS through an administrator-approved interface instead of repeatedly pasting the complete snippet. WordPress 7.0’s CSS panel remains capability-dependent.

You can also adapt an existing Button block, but inspect its generated anchor and wrapper classes first. Assign a custom class through its Advanced settings, then retarget these selectors carefully. The class and ID guide explains why the field receives a class name without a dot.

Customize colors and behavior

The default color sequence moves through purple, lilac, and pink. Edit the linear-gradient values together rather than changing a variable that the gradient does not use. The root’s --iljs-accent belongs to the shared styling vocabulary but is not the four-stop gradient source in this particular snippet.

Keep the white label readable against the lightest stop. If your palette includes a pale yellow or almost-white pink, either darken it or choose a dark foreground that remains legible across all stops. Inspect focus outlines too; a visible outline should not disappear into a similarly colored background.

Change the 35-pixel border radius for a squarer shape. Adjust the padding rather than setting a narrow fixed width that could clip translated or longer text. The inline-flex layout wraps at the component level, but extremely long labels can still crowd a phone screen. Short, descriptive wording is a better solution than tiny text.

If your entire hero moves, consider reducing activity on the button. An animated gradient background already supplies a strong visual effect. Two competing gradients can make the call to action less clear rather than more prominent.

Use links and buttons correctly

This snippet navigates, so it uses an anchor with an href. If the action opens a dialog, copies text, or changes a panel, use a button with a tested handler instead. The copy-to-clipboard tutorial demonstrates a true button action and honest failure feedback.

A link labeled Download needs a real file target. Adding a download attribute does not create a file or guarantee cross-origin download behavior. If you link to an external service, use wording that makes the destination clear. Open a new tab only when it is justified, and apply the appropriate relationship attributes if you do.

Do not put several identical primary calls to action side by side. The gradient should help identify the intended next step. Secondary actions can use quieter styles, improving the relationship between your page content and the visitor’s choice.

Troubleshoot the appearance

The gradient never shifts. Test with a hover-capable pointer or focus the link with Tab. The effect is not automatic. Reduced motion intentionally disables its transitions.

The anchor has a theme underline or different color. Inspect whether your theme has a more specific link rule. Add a carefully scoped override for .iljs-gradient-button a, rather than changing all site links.

The link stretches across the page. A theme may force anchor display or width. Restore the snippet’s inline-flex display and check the parent container. The original download provides a baseline.

The decorative star is announced. Keep aria-hidden="true" on the span because the star carries no action meaning. The text label should stand on its own.

The page does not navigate. Verify the saved href, check that no overlay intercepts clicks, and make sure a builder has not replaced the link with a preview-only control. The responsive navigation example provides another simple set of real links to test against.

Accessibility, mobile, and performance

The link remains usable with CSS disabled. Keyboard focus uses the same visual enhancement as hover, plus a distinct outline. The reduced-motion rule removes both the transition and the lift. Do not remove the focus outline to obtain a cleaner screenshot.

There is no image or script payload. Background movement can still require painting, but this effect is limited to one control during interaction. Keep the label readable on small screens and check the clickable area rather than assessing only the desktop silhouette.

Frequently asked questions

Can I use it as my theme’s default button?

You can adapt it, but the supplied selectors intentionally affect one wrapper. A global button system needs broader testing for forms, disabled states, and other actions.

Does it animate on touch devices?

Touch browsers may show a hover-like state during activation, but the link remains functional without that state. The animation does not reveal essential information.

Can I remove the motion?

Yes. Remove the hover background-position and transform changes, retaining the initial gradient and focus outline.

Check your installation

Confirm the link opens the intended destination, its label remains readable across all colors, and keyboard focus is visible. A successful call to action is a usable link first and a visual effect second.