# The Button Block: Call-To-Action Links That Match Your Brand

URL: https://pro.flexablock.com/the-button-block-call-to-action-links-that-match-your-brand/
Published: 2026-07-15T02:24:50+00:00
Updated: 2026-07-17T01:15:13+00:00
Author: admin

# The Button Block: Call-To-Action Links That Match Your Brand

A call-to-action link with three built-in styles, three sizes, an optional icon and hover effects — all from the sidebar, no CSS.

## Every page needs a button, and they never quite match

A landing page lives or dies on its buttons, but the default one your theme hands you is flat. The next section wants a lighter one, and a third needs an icon. Styling each by hand in CSS — matching padding, hover colour and radius across all of them — is the fiddly job nobody enjoys.

The Button block gives you a consistent, on-brand button you build from the sidebar. It inherits your theme’s look to start with, then every choice — style, size, icon, hover — is a control, so the whole set stays in step across the page.

Three built-in styles — fill, outline and ghost — for primary and secondary actions

Three sizes — small, medium and large — to fit the spot on the page

Add an icon and place it before or after the label

Set hover colours and a little motion — grow, lift or push — for a response when the pointer lands

Plus a full-width toggle, alignment, light and dark colours, typography, spacing and responsive controls

It takes seconds. Type the label, paste the link, and pick a style and size from the toggles. Want an icon? Choose one and place it before or after the text. Set a hover colour and a touch of motion, and the preview shows exactly what a visitor will see.

## See it work

**The fill style, for your main action.** A solid button that carries the primary call-to-action.

[Get started](#)

**Outline, for a secondary action.** The same block with a lighter, bordered look.

[Learn more](#)

**Ghost, for the quietest link.** Text only, no fill or border, until the pointer arrives.

[Maybe later](#)

**Large, with an icon and a lift on hover.** A bigger size, an arrow after the label, and a small motion when the pointer lands.

[Start the tour](#)

## Ready to place your next call to action?

The Button block ships inside Flexa Block. Install the plugin and it’s waiting in your editor the next time you open a page.

[Download Flexa Block](https://wordpress.org/plugins/flexa-block/)