Key

A push-button acts as your call to action (CTA) and connects to pages, forms, assets, and more.

Within this session, you will understand:

1. Primary concepts of a push-button
2. Methods to personalize a hyperlink section into a push-button

Primary concepts of a push-button

To introduce a push-button to your website:

1. Head to Add panel > Elements > Basic
2. Drop a push-button element onto the Webflow canvas

You can modify the default push-button text in two manners:

1. Double-tap the push-button and edit the text
2. Highlight the push-button and hit Enter/Return

You can also tweak the color of your push-button. To alter the push-button’s background color:

1. Select the push-button
2. Visit Style panel > Backgrounds
3. Tap the swatch to unveil the color picker
4. Select a color

A push-button can link to a URL, an internal or external page, a page section, a file download, or it can initiate an email or a phone call. You can access these alternatives by choosing the push-button on the canvas, then navigating to Element settings > Link settings or by clicking the “cog” icon on the push-button element on the canvas. Explore further about link settings.

Methods to personalize a hyperlink section into a push-button

A hyperlink section is akin to a div block — a container in which you can insert elements. You can obtain hyperlink sections from the Add panel > Basic area.

Afterwards move to Add panel > Typography and drag a text block inside the hyperlink section. You can double-tap to edit the text. To eliminate the underline, proceed to Style panel > Typography > Style and press the “X” in Decoration.