CTA Button is a button with two lines of text and an icon. The main text says what to do and the subtext adds a short reason. Use a solid colour or a gradient background.
Each button below is a CTA Button with a different style and a working link: a phone number, a PDF download, a page on this site and an email address. Hover over a button to see its hover colours.
A green pill with a phone icon and a tel: link, so a tap on a phone starts the call. The background darkens on hover.
A transparent button with a 2px border that fills dark on hover, when the text and icon turn white. It opens a real PDF menu in a new tab.
A purple to pink gradient background, capital letters in the main text and a light subtext. It links to the element list on this site.
A wide navy button with a yellow icon and a mailto: link. The title turns yellow on hover.
Set the text and link, then style it.
Drop CTA Button onto your page where you want the call to action.
Enter the main text, the subtext, pick an icon and set the link.
Set the width, background, typography, icon size and colour, borders and padding.
A compact button that gives visitors a little more context than a single line.
A bold main line and a smaller subtext line, each with its own typography.
Choose any icon from the Breakdance icon library and set its size and colour.
Use a solid colour or a gradient, with a separate hover colour.
Set hover colours for the title, subtitle, icon and background.
Link the button to any page or URL with the standard Breakdance link control.
Set borders, corner radius and shadow.
Set the button width, the gap between the title and the subtext, and the padding.
Add space above and below the button.
The link control takes tel: and mailto: links as well as pages and files, as the demos show.
Anywhere a single line does not say enough.
Watch the video, with a short line about what it covers.
Download on a platform, with the store icon.
Start a free trial, with a line such as no card required.
Book a call, with the length of the call in the subtext.
Download a guide, with the file type or size.
A stronger main call to action at the top of a landing page.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Main Text | The first, larger line. | WATCH VIDEO |
| Subtext | The second, smaller line. | WATCH THE VIDEO TO LEARN MORE |
| Icon | Icon shown beside the main text. | Play |
| Link | Where the button goes. Takes a page, URL, tel: or mailto: link. | — |
| Design | ||
| Width | Button width. | 250px |
| Title Typography | Main text style, with a hover colour. | 16px |
| Subtitle Typography | Subtext style, with a hover colour. | 13px |
| Background Color | Solid or gradient background, with a hover colour. | — |
| Icon Size | Width and height of the icon. | 24px |
| Icon Color | Icon colour, with a hover colour. | White |
| Borders | Border, radius and shadow. | — |
| Gap | Space between the title row and the subtext. | 4px |
| Padding | Space inside the button. | 10px |
| Spacing | ||
| Margin | Space above and below the button. | — |
Yes. Leave the Subtext field empty and the button shows the icon and main text only.
Yes. The Background Color control accepts a solid colour or a gradient. The See every element button uses one.
Yes. The title, subtitle, icon and background each have their own hover colour, as the outline demo shows.
It is 250px by default. Change it with the Width control. It never grows wider than its container.
Yes. Use a file URL for downloads, tel: for phone numbers and mailto: for email, as in the demos above.
CTA Button is included with Phox Elements, along with 140+ other premium elements for Breakdance.