The button widget

Add call-to-action buttons to your page and link them to a pop-up, landing page, an external URL, or a section on your page.

Using the button widget

Click on the button or hover over it and click the edit icon to open the button widget settings.

The button widget settings are movable. Therefore, if the settings are in the way of the button you are editing or not all of the settings are visible, simply click and drag the button widget settings from the ⠿ in the upper-left corner of the settings to be better positioned for your editing.

Editing click events

You can link your buttons to one of the following click events:

• pop-up (oftentimes has a form on it for visitors to opt in)
• Calendly pop-up (presents visitors with your Calendly schedule)
• page section (takes visitors directly to a specific part of your page)
• landing page (directs visitors to another landing page)
• external URL (directs visitors to a different page or site)

Click here for more information on linking options.

To edit or choose a click event for your button, simply click on your button, then select the click event action.

Quick actions

Hover over your button, then click Edit Click Event or Add Click Event as seen below (alternatively, click on your button, then open the click event panel):

Existing button on a page template

New button widget

If your button is already connected to a pop-up, you can edit the pop-up by clicking Edit Pop-up, or choose a different click event by selecting the radio button next to it.

You can learn more about setting up pop-ups here.

If you choose a URL or existing landing page, you can select the New Window option to make the link open in a new browser window. You can also choose Use Nofollow so the hyperlink does not influence the ranking of the link’s target in a search engine's index.

Clicks as conversions

The most common type of conversion when using Leadpages is when someone opts in to a form. However, at times you may want to count a visitor simply clicking a button on your page as a conversion, even if they're not filling out a form.

With the button widget, you have the option to add button clicks to your page's overall conversions and conversion rate.

To count a button click as a page conversion, select the link icon within the widget's settings, then check the box that reads, "Count this button click as a page conversion."

Button click conversions are available when linking to an external URL, pop-up or Calendly pop-up.

Customization and styling details

Global button styles

For more consistent branding in fewer clicks, global primary and secondary button styles will help speed up your page design processes. Within the button widget, you can choose styling options for both a primary and secondary call-to-action buttons, and easily apply them throughout your landing page or website.

Global button styles can be applied to button, form and checkout widgets. New widgets of these types will have the primary button style by default when added to your pages.

After clicking on your button, select Primary or Secondary under "My Buttons" to choose one of your global button styles. Learn how to edit these global styles below.

You can also choose the size of your button as well as toggle the Full Width option on, which will force the button to fill the entire width of the column it is in. If the full width option is turned off, choose how you would like to align your button within its column.

Edit global button styles

To edit global button styles, click Styles on the left-hand sidebar of the builder, then the Buttons tab. Or, from the button widget, click Edit Styles and the global styles menu will open.

More on formatting and styling your button below.

After saving the global button style, any button on your page with that style (primary or secondary) selected will also be updated.

Set a custom button style as a global button style

To make a custom button style a global button style (primary or secondary) on your page, simply click on a custom button on your page, then select either Use as Primary Style or Use as Secondary Style.

Formatting and styling options

Click on your button, then select the styles tab to adjust the formatting and styling of your button.

In the style menu, you can choose between a flat, outline, or gradient style of button, as seen below:

You can also choose between square, rounded, or pill corners for your button.

The color picker allows you to choose from your brand colors, recent colors, or click ADD next to "Recent Colors" to enter hex codes or select a different color for the background of your button and text, as shown below.

Formatting options for font, size, line spacing, and style of your button text are also available.

You can also format your text in bold, italics, underline or strikethrough as well as set button text color.

Adding button animation

You can add button animations to any button on your page. Select the animation tab in the button widget settings to select an animation.

You can adjust the animation's speed for all animations as well as distance and trigger (hover or autoplay) when applicable for specific animations.

Tips and frequently asked questions

Can I link a button to a standalone pop-up, created under Conversion Tools?

Absolutely, but you'll want to use the HTML widget instead of the button widget. And note that the analytics for any conversions on that pop-up will be located under Conversion Tools in your account navigation menu next to that pop-up.

Can I link a button to third party/HTML code?

Unfortunately no. You can either use our HTML widget to apply a third party button or use the method above by applying an HTML widget to your pop up.  

Tip: Don’t forget to link the button.

Although you can create a button without linking it to a destination, we recommend linking your button to something, so that your visitors are not confused if they click on a button and nothing happens.

Tip: Select a button color that stands out from the rest of your page.

A bold color will draw a users’ eye directly to your button, making them more likely to click it.