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.
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
Beginner 5 minutes- 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: /contact or /services.
Set the link options if needed. Click the small gear icon next to the link field to set whether the link opens in the same tab or a new tab. 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 at the top: 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 section and click it.
Click the icon field and browse the icon library. Elementor includes hundreds of icons from Font Awesome.
Choose where the icon appears — before or after the text.
Common questions
Related guides
- How to edit text in Elementor
- Global colors & fonts
- Changing colors & fonts
- The most useful Elementor widgets
- Publishing & updating your page
Need a hand?