Centered call to action with two buttons
A light centred block with a headline, one paragraph and a primary plus secondary button.
When to use it
For the moment in a page where two next steps are genuinely equal — buy or book a call, start free or read the docs. Both buttons sit in one flex wrapper so the gap between them stays a single control after import, which is the small detail that decides whether the pair still looks deliberate after someone edits the labels. If one action really matters more than the other, use the dark band instead and drop the second button.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the section
- Container × 1 — the inner max-width wrapper
- Heading × 1
- Text Editor × 1
- Container (flex row) × 1 — the button pair
- Button × 2
Things worth knowing
- The buttons are wrapped in one flex container with a gap, rather than given margins individually — after import the spacing is one control instead of two.
- The secondary button is defined by a border, which is enough for it to be recognised as a Button rather than a text link.
- Hover and focus styles are not readable from static HTML; add them in Elementor, and check the focus ring is visible for keyboard users.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Centered call to action with two buttons</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#14233a}
.cta{padding:82px 24px;text-align:center;background:#f7f9fc;border-top:1px solid #e9eef5;border-bottom:1px solid #e9eef5}
.inner{max-width:680px;margin:0 auto}
h2{font-size:36px;line-height:1.15;letter-spacing:-.03em;margin:0 0 14px}
.cta p{margin:0 0 28px;color:#5b6b82;line-height:1.85;font-size:16px}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.button{display:inline-block;padding:15px 28px;border-radius:9px;text-decoration:none;font-weight:700;font-size:15px}
.primary{background:#ff5b35;color:#fff}
.secondary{border:1px solid #c9d4e2;color:#14233a;background:#fff}
@media(max-width:640px){.cta{padding:56px 20px}h2{font-size:27px}}
</style>
</head>
<body>
<section class="cta">
<div class="inner">
<h2>Two ways to start</h2>
<p>Convert a page you already have, or take a ready-made template from the library and adjust it in the editor.</p>
<div class="actions">
<a class="button primary" href="#convert">Convert my page</a>
<a class="button secondary" href="#library">Browse templates</a>
</div>
</div>
</section>
</body>
</html>