Make full width buttons in WordPress

A button that stretches across its column or card, and a group of buttons stacked one under another instead of side by side.

Type

An upgrade to Button and Buttons

Find it

Button settings, Full width

Phones

One setting for every screen

Speed

Layout only, no motion

What you can change

The settings worth knowing.

Two switches, used alone or together.

Monthly plan

Full width

Fill the space

Fills its container, including inside Stack and Row groups where WordPress’s own width falls short.

Stack buttons

One under another

Stacks the buttons vertically, aligned by WordPress’s justification.

Stack buttons

Mix the two

A full-width button fills the stack while the others keep their natural width.

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 the button or the group

A single Button for full width, the Buttons block for stacking.

3

Switch it on

Turn on Full width, Stack buttons or both, then publish.

Good to know

Fair questions.

They are a Grinner upgrade to the Button and Buttons blocks. A button can stretch across its column or card, and a group of buttons can stack one under another instead of side by side. Use them for neat, easy to tap buttons in cards and on phones.

Not in Grinner. WordPress 7.1’s own responsive styles can change width per screen, at 782 and 480px.

Inside Stack and Row groups it stops short. Full width fills the space.

There’s no spacing control of its own. Use the Buttons block’s own spacing.

WordPress’s justification aligns them left, center or right.

Pairs well with

Try it with these.

Turn a section, or each block in it, into a card with one switch.

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

A call to action that stays on screen as the page scrolls.

Grinner grinning

Go make something
beautiful.

Free on WordPress.org · No Pro version