OneTaskBy Tim King · Updated
CTA Banner Builder
Call to Action Section in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CTA Banner Builder works
A CTA banner is the band near the end of a page that asks visitors to take the next step, such as starting a trial or booking a call. The CTA banner builder lets you set the heading, line, button and colours, then copy clean HTML and CSS.
Visitors who read to the bottom of a page are the most interested ones, so a clear banner there catches them at the right moment. One main action works best, with an optional lower-key link for people who are not ready yet.
How the CTA banner builder lays things out
The banner is a flexbox with wrapping turned on. In the split layout the text sits on the left and the buttons on the right, and when the screen is too narrow for both the buttons drop underneath with no media query. The centred layout stacks everything in a column for a bolder, simpler look.
Accessibility
The banner is a <section> labelled by its own heading, so screen reader users can find it from
the landmarks list. The button and link are real links with a clear focus outline, and the text is
white on the background you choose, so pick a dark enough colour for good contrast.
FAQ
What makes a good call to action?
Say what happens next in the visitor's words, such as "Start free trial" rather than "Submit", and remove a worry in the supporting line, such as no card needed or cancel any time.
Should the button be a link or a button element?
Use a link when it goes to another page, such as sign-up or pricing, which is what this banner
does. Use a <button> only when it runs an action on the same page, such as opening a form.
How many CTA banners should a page have?
Usually one near the end, plus the main button in the hero at the top. Long pages can repeat the same call to action halfway down, but keep the wording the same so it is clearly one next step.
Why is the secondary action styled as a plain link?
Two equally strong buttons split attention. A plain underlined link keeps the main button as the obvious choice while still offering a gentler option to people who want to ask a question first.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Card Builder
Design a card component and copy its HTML and CSS.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.