Adding and Editing Buttons in the Classic Builder

 Buttons are one of the most versatile tools to engage your page visitors. Page visitors can click buttons to complete the desired conversion action, such as signing up for a campaign, completing a form, and so on.  

This article will explain how to add buttons in the Classic Builder, including: 

1. Setting up Button Click-Actions
2. Styling & Editing Your Button with the Properties Tab, using the
   • The Geometry Section
   • The Click Action Section
   • The Button Label Panel
   • The Appearance Section
   • The Element Metadata Section

Building in Smart Builder? See this article: Adding and Editing Buttons in Smart Builder. 

For a quick demo, see this video:

Adding Buttons to the Classic Builder

Navigate to your landing page in the Classic Builder. Next,

1. Navigate to the Widget Panel on the left-hand side.
2. Drag and drop the Button  widget to the section of the page where you'd like the button to appear:
   
3. The default button will appear on your page:
   

Setting up Button Click-Actions

A click action - in short - is the action that follows when your page visitor clicks on the button from your published page.

To set up a custom click-action,

1. Select the button.
2. Click the Properties tab on the right-hand side of the Classic Builder.
3. Scroll down to the Click Action section:
   

By default, all new buttons by default are set to Go to URL; however, selecting the drop-down menu will reveal other actions:

Here are the following Click Action options:

Go to URL: The visitor will be redirected to a URL of your choice.

• Tick the option Pass through URL parameters if there are custom URL parameters or referral sources you wish to pass through with the button-click. 
• The Target field controls how the page visitor is redirected, e.g., New tab or window will launch the URL in a new tab, whereas Same tab or window will redirect the page visitor from your landing page to the chosen URL.

Here is an example of a button navigating to unbounce.com, with the target set to New tab or window: 

Go to URL in a Lightbox: The chosen URL will load in a pop-up window known as a lightbox. See our documentation to learn more: Adding a Lightbox.

Go to URL in a Lightbox: A lightbox will appear when a page visitor clicks the button. Inside the lightbox will be the live webpage of the URL. 

Call A Number: This will initiate a phone call to the selected number.

• The Call A Number feature will only work if the device the page visitor is using is capable of phone calls, for example, a mobile device or desktop system with a tool like FaceTime.

Send an E-mail: If available, the button will open a supported mail application (e.g., Mozilla Thunderbird, iCloud Mail) with a new e-mail.

Be sure to Save your page while you continue to edit the button. 

Styling & Editing Your Button with the Properties Tab

In addition to setting the button's action, you will want to customize its appearance.

Single-click the button.

The Properties tab contains five sections that allow you to edit your button further: Geometry, Click Action, Button Label, Appearance, and Element Metadata. 

The Geometry Section

The Geometry section gives you control over the size of your button, and its position on the landing page. 

• Use the Size fields to enter an exact numerical value in pixels for the Width and Height dimensions of your button.
• Use the Position fields to enter an exact numerical value in pixels to move your button to the Left of the page and the Top of the page.

Alternatively, you can also edit the size of your button by dragging the small squares around the perimeter of your button, or dragging the button across your page to change its placement:

The Click Action Section

As mentioned above, Setting up Button Click-Actions, the Click Action section, is the call-to-action center for your button.

Want to know more about how to use the Click Action panel? Check out these links:

• Adding Click to Call Buttons
• Passing Incoming URL Parameters to Outgoing Button Links

The Button Label Panel

The Button Label section allows you to change all the text values on your button, including text size, font family, and more:

More importantly, it allows you to set up Dynamic Text values through your page's URL to increase message match on your PPC campaigns.  

Read more about Dynamic Text replacement:

• Working with Dynamic Text Replacement
• Adding Dynamic Text to Your Button Copy

The Appearance Section

The Appearance section allows you to modify the look of your button, such as text color, background color, border, and more.

You can select the Style of your button using the drop-down menu, for example, a Solid Color, Gradient, or Image. 

You can also update the different button states:

• Up (normal), 
• Hover (mouse is above the button), and 
• Active (mouse is clicking the button) states.

If you edit the look of the button in the Up state, you can select to have Unbounce automatically edit the appearance of your button in Hover and Active states for you, or you can remove the checkmark beside Create appearance based on Up state to change the appearance manually for each of the other two states:

Here is a gif example of updating the button style:

The Element Metadata Section

The ELEMENT METADATA  section contains important information that's unique to your button. The ID value may be required when you want to apply custom CSS, HTML, or scripts that apply to this specific button:

Knowing details about the element metadata comes in handy if you plan to set up anchor links.

Want to do more with your buttons? Check out the following links:

• Adding Smooth Scrolling Links and Anchor Buttons
• Adding Click to Call Buttons
• Adding an Image to a Button
• Passing Incoming URL Parameters to Outgoing Button Links