Join the waitlist

Add gradient and pattern buttons to WordPress

Paint a pattern or gradient inside a button, behind its label. Stripes, lines, a grid, dots or checks, or a gradient that flows slowly.

Get Grinner free
See it live

Type

An upgrade to the Button block

Find it

Button settings, Pattern

Phones

Same on phones

Speed

A flowing gradient pauses when it’s off screen

Live demo

Buttons with texture.

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

Shop stripes
Spot the deal
Check it out
Golden ticket

Settings    Pattern Diagonal stripes, Dots, Checkerboard and Animated gradient

What you can change

The settings worth knowing.

A pattern or a gradient, how strongly it shows, and its grain.

Menu
Prices
Visit

Pattern

Ten patterns

Diagonal stripes, Lines, Grid, Crosshatch, Dots, Dashes, Checkerboard, Gradient, Conic or Animated gradient.

At 10%
At 60%

Strength (%)

Faint or bold

How strongly the pattern shows, 16% by default. Gradients go to full.

Fine grid
Coarse grid

Density

The grain

Density, thickness, dot size and square size shape the pattern.

Three seconds

Speed (seconds)

Flowing gradients

Up to three colors that slide through the button, faster with a lower number.

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

Choose the button

Click the button you want to paint.

3

Paint it

Choose a Pattern, its colors and strength, then publish.

Good to know

Fair questions.

Button backgrounds are a Grinner upgrade to the Button block. A pattern or gradient is painted inside the button, behind its label, such as stripes, a grid, dots or a slowly flowing gradient. Use them to give an important button extra character.

Yes. Patterns stay above the fill with Slide Fill, Circle Expand and Text Flip.

No. One pattern per button.

It stands still.

It’s the solid color under the pattern, and the color a hover fill animates over.

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 hover animations

Slide fill, circle expand, text flip and more, in your own colors.

Text effects

Gradient text, a gradient that flows, and words that color in as you scroll.

Borders and gradient border

Dashed and dotted borders, or a gradient ring that slowly turns.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version