What is the Button block for?
A button has one job: make the next step unmistakable. Use a Button when the surrounding content has already done the explaining and the visitor can now act. The label should make it clear what happens after the click.
A button has one job: make the next step unmistakable. Use a Button when the surrounding content has already done the explaining and the visitor can now act. The label should make it clear what happens after the click.
Turn on Show a second button to add a second button to a Button block, just like in the heroes: set the Secondary link destination and its label, choose the Secondary action style (Text link or Button), and under Buttons whether they sit Side by side or One under the other. The block’s alignment applies to the pair.
Until now this took two Button blocks, one below the other, and the two buttons never shared a row. If both destinations matter equally, make both of them buttons. If the second is just more information, a text link is enough, as in the sample below.
Where does the button start? A standalone button starts in line with the text column. To make it wider, choose Full width or Edge to edge under the block’s Width setting.
Describe the next step on the button. “Request a quote”, “Download the guide” or “See pricing” says more than “Click here”. Give the button enough contrast to be easy to spot, but do not let it compete with the page's main message.
This is deliberately simple: the key decisions are the label, destination and visual emphasis.
Short action copy that tells visitors what will happen after they click.
Link to an internal page, another content item or an external URL.
Align the button left, centre or right to fit the rhythm of the surrounding content.
Set the button background and label colour independently.
Give the block its own background and section width, plus Readable, Wide or Full content width.
Limit the CTA by device or time window when the action is only relevant in a particular situation.
Choose based on how much explanation the action needs around it.
ONE BUTTON, ONE DECISION
A good CTA is specific, appears at the right moment, and leads to a screen that delivers exactly what the label promised.