Hover Colors lets you change a block’s text, background, and border colors when visitors hover over it — the finishing touch that makes buttons, cards, and links feel alive. WordPress doesn’t offer hover states out of the box; this extension adds them right where you’d expect to find them.
Setting Hover Colors
Select any block that supports text color — buttons, groups, headings, paragraphs, columns, and many more — and open the Color panel in the block sidebar. Alongside the normal color options you’ll find three new ones:
- Hover Text
- Hover Background
- Hover Border
Each opens the familiar WordPress color picker with your theme’s palette, custom colors, and transparency support. Set one, two, or all three — and clear them at any time to remove the hover effect.
Transition Controls
Once you’ve set a hover color, two more controls appear so you can shape how the change feels:
- Transition Duration — how quickly colors shift, from instant (0) up to 2000 milliseconds. The 200ms default feels snappy and polished.
- Timing Function — the easing curve: Ease, Linear, Ease-in, Ease-out, or Ease-in-out.
Good to Know
- Hover colors are pure CSS — no JavaScript loads on your site, so there’s zero performance cost.
- Theme palette colors stay connected to your Global Styles: if you update a palette color later, hover states using it update too.
- The effect previews live in the editor, so you can hover your block right on the canvas to test it.