About this block
A closing call to action built around one big button. A centered heading and a sentence of supporting copy sit above a large bordered button that fills with your primary colour when someone hovers it. The whole button is clickable, not just the words, and it springs into view as the section scrolls onto the screen.
When to use it
- At the end of a landing page, as the final push to sign up, book, or buy.
- Between long sections, to give readers who are already convinced a way out.
- When there's one action that matters and you don't want a second button competing with it.
What's inside
- An h2 heading that grows from phone to desktop size, centered.
- A muted supporting paragraph, capped at a readable line length.
- A large Button with a 2px primary border, a light fill, and an arrow icon on the right.
- On hover the button fills with your primary colour and its text switches to the matching contrast colour.
- A spring entrance animation that plays when the button scrolls into view.
How to customize it
- Rewrite the heading as the outcome people get, and use the paragraph to say what happens after they click.
- Change the button text to a specific action like "Book a call" or "Start free trial", and point it at the right page.
- Swap the arrow for another icon in the button's settings, or remove it.
- Change the section background to your primary or a dark surface to make the close stand out, and adjust the text colours to match.
Questions
- Why use one button instead of two?
- A single clear action is easier to choose than two similar ones. Put secondary links like "Talk to sales" in a different section.
- Can I turn off the animation?
- Yes. Open the button's animation settings and choose none. The button still fills on hover.
- Is the button accessible?
- It's a real link with visible text, so screen readers announce it by its label and keyboard users can tab to it.