Join the waitlist

Add button hover effects in WordPress

On hover or keyboard focus a button plays one effect. A fill slides in, a circle grows from the center, the label flips, or an outline fills with color.

Get Grinner free
See it live

Type

An upgrade to the Button block

Find it

Button settings, Hover animation

Phones

A tap gets only the pressed response

Speed

Light hover styles, only where used

Live demo

Five ways to say press me.

This is the real Button hover animations setting, running on this page.

Slide Fill
Text Flip
Grow
Circle Expand
Ghost Fill

Settings    Hover animation Slide Fill, Text Flip, Grow, Circle Expand and Ghost Fill

What you can change

The settings worth knowing.

One animation per button, with its own fill and text colors.

Slide
Flip
Grow
Circle
Ghost

Hover animation

Five animations

Slide Fill, Text Flip, Grow, Circle Expand or Ghost Fill.

Hover over me

Fill colour

The hover fill

The slide, the circle, the color behind a flipped label, or the ghost fill.

Flip me over

Text colour

The hover label

The label color on hover. Leave it unset and Slide Fill and Circle Expand pick the more readable of your light and dark colors.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select a button

Any Button block on the page.

3

Pick the animation and colors

Choose a Hover animation, a Fill colour and a Text colour, then publish.

Good to know

Fair questions.

They are a Grinner upgrade to the Button block. On hover or keyboard focus a button plays one effect, such as a sliding fill, a growing circle, a flipping label or an outline filling with color. Use them to make buttons feel alive and clickable.

If Base fill matches the Fill colour, the change is invisible. The panel warns you.

No. The label always stays on one line.

No. Ghost Fill is see-through at rest, so the pattern disappears.

Color changes only, instantly. Nothing grows, flips or travels.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All buttons features

Button icons

An icon before or after the label, with its own hover color.

Button corner marks

Crop-mark corners around a button that slide on hover.

Accent text

Highlight words with a marker, underline, circle or serif italic, saved once for the whole site.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version