How do I add a button in Webflow?

Drag a button onto the page

Open the Add panel and go to Links. Drag Button onto the canvas, inside the section where the action belongs. A button is the usual call to action: a label someone can click.

Edit the label in either of two ways. Double-click the words, or select the button and press Enter. Replace the default text with the action, such as View pricing. A label that says Click here does not say where the visitor is going.

Example: the services page needs one action under the intro, and it should open the existing pricing page. Drag the button under that intro. The label is View pricing. You have not set the destination yet. The label and the link are separate.

Point it at a real destination

Select the button. Open Element settings (the shortcut is D) and find Link settings. You can also use the cog on the element. Choose the link type, then fill in that type.

Page links to a static page on this site. Pick it from the dropdown, or search. URL is any address you paste, including a page on another site. Page section jumps to an element on the current page. Email and Phone start a message or a call. File attaches an asset. Webflow says file links are a premium feature, available on paid plans. An image or a document opens in the same tab. Other file types download. Check Open in a new tab when that type offers it and you want a new tab.

For the services example, choose Page and select Pricing. Leave Open in a new tab off, because the visitor is staying on your site. The new tab guide is that checkbox. The email and phone guide is those two types, including a phone field on a CMS item.

Publish and click the button on the live page. A button that looks correct in the Designer can still point at the old URL.

Style one class, not each button by hand

The default button is easy to spot, and it may not match the site. Select the button, open Style panel, Backgrounds, and click the swatch. Pick the color you already use for actions.

Name the class before you style a second button. Primary button is a clear name. The next button that uses that class gets the same background, type, and padding. Change the class once when the brand color changes.

Padding is what keeps the label off the edges. If the words touch the color, add padding on the class. The background color is not the text color. If the label disappears, the text and the background are too close. Set the text color in Typography until you can read the label.

A link block is the other choice when the clickable area must hold an image plus text. A button is the simpler control when you only need a label. Do not nest a link inside a link.

Show that it can be clicked

Buttons are interactive, so the hover state should change something the visitor can see. Select the button, open the States menu in the Selector, and choose Hover. Then change the background or the text color. Add a transition for the property you changed so it does not snap. Choose None when you are finished, or the canvas stays on the hover look.

Most touch devices do not show hover. The hover guide covers Pressed, which is what a tap can show, and how to reset a hover color you set by mistake.

Keep the label readable on hover too. A lighter background with pale text fails the same way a pale paragraph fails.

Use the same button again

Once Primary button exists, reuse it. Select a new button, click the Selector, and choose that class. Then set Link settings for this button only. The class does not store the destination. Each button keeps its own link.

Example: the homepage, the services page, and the blog template all use Primary button. The homepage button opens Pricing. The blog button opens the contact page. They look the same because they share the class. They go to different places because each link was set on the element.

If a whole card should be clickable, that is a link block around the card, not a second invisible button on top. One clear button is enough when the action is a single next step.

Adding a button on a page you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.