Editing buttons & links in Elementor

Learn how to change a button's label, destination URL, color, and style in the Elementor editor.

Buttons are one of the most important elements on your website — they drive visitors to take action. This guide shows you how to edit a button's text, destination link, and appearance in Elementor.

These steps use Elementor's standard Button widget. If your site uses Elementor's newer V4 Button element, the first tab is called General instead of Content, the label field is called Button text, and you add a link with the plus sign next to Link.

Quick summary

Click any button on your page to select it. In the left panel's Content tab, update the button text and link. In the Style tab, change the button color, size, and shape. Always publish when done.

What you'll need

The Elementor editor open

How to change a button's text

Click the button on your page to select it. The left panel switches to the Button widget's settings.

In the Content tab, find the Text field. It shows the current button label.

Click in the Text field and type your new label. Keep it short and action-oriented — for example, "Get a Quote," "Book a Call," or "Download Now."

Click Update or Publish to save.

How to change a button's link

Click the button to select it and open its settings.

In the Content tab, find the Link field. You will see the current URL (web address) the button points to.

Click in the Link field and type or paste the new URL. For an external website, include the full address: https://www.example.com. For an internal page on your site, you can use just the path, starting with a slash: /contact or /services.

Set the link options if needed. Click the small gear icon next to the Link field. Turn on Open in new window if the link should open in a new tab or window. (The same menu has Add nofollow, which tells search engines not to associate your site with the linked site.) External links should generally open in a new tab; internal links should stay in the same tab.

Click Update or Publish to save.

Test your links after changing them

Always click your published button on the live site to confirm it goes to the right place. A broken button link is one of the most common and frustrating mistakes on a website.

How to change a button's appearance

Button colors, size, padding, and shape are all in the Style tab.

Click the button to select it.

Click the Style tab in the left panel.

Adjust the settings you want:

Background color — the fill color of the button
Text color — the color of the button label
Border radius — how rounded the corners are (0 = square, higher number = more rounded)
Typography — font size, weight, and style of the button text
Padding — the space inside the button around the text (makes the button bigger or smaller)

Most buttons on your site use the same colors as your brand. If you want to change a button color consistently across the whole site, see Global colors & fonts rather than editing each button individually.

Button states: normal vs. hover

Elementor lets you style a button differently for its normal state and its hover state (when someone moves their mouse over it).

In the Style tab, you will see two tabs, Normal and Hover. Switch between them to set different colors for each state. This is optional but adds a nice interactive feel.

Adding an icon to a button

You can add an icon (such as an arrow or download symbol) next to the button text:

Click the button and go to the Content tab.

Find the Icon field.

Click the Icon Library button to pick an icon. The library includes free Font Awesome icons, and you can search it by name. Or, if your site allows SVG uploads, click the SVG button to use your own SVG image.

Choose where the icon appears — before or after the text — in the Icon Position field. Icon Spacing sets the gap between the icon and the text.

Common questions

How do I make a button link to a different page on my own site?

In the Link field, type the path of the page, starting with a slash — for example, /about or /contact. Or paste the full URL from your browser's address bar while viewing that page. For internal pages, leave Open in new window off so the link opens in the same tab.

How do I make a button open a phone dialer on mobile?

In the Link field, type tel: followed by the complete phone number, with no spaces, dashes or other symbols — for example, tel:5551234567. When tapped on a phone, this opens the dialer with the number pre-filled.

How do I make a button open an email?

Use mailto:youremail@example.com in the Link field. This opens the visitor's email app with your address pre-filled.

I changed the button color but it doesn't match the site — why?

The original color may have been set via global styles or your theme. A color you pick on one button applies to that button only, and that button no longer follows the global color. To match the site again, click the globe icon next to the color setting and choose one of the global colors. If you want to change the color site-wide, see Global colors & fonts or contact us.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Learn more

Elementor Button widget

Editing buttons & links in Elementor

On this page