Add corner marks to WordPress buttons

Small L-shaped marks sit at a button’s corners, as ticks, brackets or a full frame. On hover they can slide in toward the label or out.

Type

An upgrade to the Button block

Find it

Button settings, Corner marks

Phones

A press nudges the marks in, even on touch

Speed

A fixed 2px stroke, nothing heavy

What you can change

The settings worth knowing.

Ticks or brackets, which corners, and how they move.

Variant

Ticks or brackets

Tick or Bracket, which has arms 1.8 times longer.

Marks as frame

A full frame

Extends the arms into a closed rectangle.

Inset (px)

In or out

From minus 16 to 16px. Negative values overhang outside the button.

Mark colour

Their color

Any palette color, or the surrounding text color if left empty.

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

Pick a button

Click the button that should get the marks.

3

Add the marks

Turn on Corner marks, pick a variant, size and hover, then publish.

Good to know

Fair questions.

Button corner marks are a Grinner upgrade to the Button block. Small L-shaped marks sit at a button’s corners as ticks, brackets or a full frame, and can slide on hover. Use them for a sharp, technical look on your buttons.

No. The stroke is a fixed 2px with square ends.

Yes. The two motions combine.

No hover movement. Push rests with its arms pulled in, and a press moves them 3px.

Yes. Turn off the corners you don’t want.

Pairs well with

Try it with these.

Little crop marks drawn on a box’s corners.

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

Underlines, pills and fills on menu links, and a mark on the current page.

Grinner grinning

Go make something
beautiful.

Free on WordPress.org · No Pro version