Priority support
Help Center / Ongecategoriseerd / Button element

Button element

Laatste update: mei 19, 2025

Who can use this feature:
This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Button Widget

Add and delete the element

To access and use a widget:

  1. In Elementor Editor, click +.
    All available elements are displayed.

  2. Click or drag the element to the canvas. For more information, see Add elements to a page.

To delete the widget:

  1. On the canvas, select the element by clicking it.
  2. Press the delete key on your keyboard. For more information, see Delete elements from a page.

What is the Button element?

Buttons on a website are crucial in guiding user actions, providing clear calls to action, and enhancing overall user engagement. Buttons let you add interactive and visually appealing buttons on your site.

Common use case

Blair is building a website for a gym. At the top of the homepage they want to add a button to the Hero section. Visitors clicking the button will go to a registration page. a striking button that will draw the attention of potential customers.

Instead of using stars for their ratings, Jaime decides to use dollar signs for the value rating and hearts for their reaction rating. In addition, they decide to value will be ranked 1-5, while reaction will be ranked 1-10.

Additional use cases 

  • Use the Button element to create a stunning portfolio gallery. Each Button can be linked to a project page or a detailed view.
  • If you’re hosting an event or webinar, the Button element can help you create visually appealing banners or posters.
  • Use Buttons to display before and after transformations for home renovations, fitness progress, or any other transformation journey.

Add a Button element: Step-by-step

  1. Add the Button element to the canvas. For details, see Add elements to a page.

    The options for the Button element appear in the left panel.

  2. In the General tab, in the Button text field, enter Get Started.
    We want the button to link to a registration page.
  3. Click the plus sign next to Link.
  4. In the Link text box, add the URL of the page you want to link to.
    The button is a little big for our design, so let’s make it smaller.

  5. Open the Size field.
  6. Set the Width to 200 and Height to 50.

  7. Click the Style tab.
    Let’s change the text style to match the rest of the site.

  8. Open the Typography field.
  9. Use the Font Family dropdown to select Sora. For details, see Style tab – Typography.
  10. Use the Font Weight dropdown to select 600.
  11. Use the Font Size field to select 16.
    The design calls for a transparent background.

  12. Open the Background section.
  13. Click the color swatch to open the color picker. For details, see Use the color picker.

  14. Set the opacity to 0%.
    Now let’s shape the button. In this case we want a rounded button with a white border.

  15. Open the Border section.
  16. Click the Adjust Borders icon.

  17. Enter 50 in the number field for all the corners.

  18. Click the plus sign by Border.

  19. Use the number field to increase the Border width to 2.

  20. Set the color as #FFFFFF.
    To help the button stand out, we can change its appearance when users hover over it. Hover is called a state and elements can be edited to change appearance depending on its state. For details, see Element states.

  21. In the Classes text field, click the ellipses next to the word local.
  22. Select Hover from the dropdown menu.
    Notice the word hover appears in the Classes text box and is colored pink. This indicates that we are now editing how the button will appear when visitors mouse over it.

  23. Click the swatch by Color to open the color picker.
  24. Change the Hex color number to #FFFFFF and the opacity to 100%.
    When users mouse over the button it turns white. 

    The button is ready.

Settings for the Button element

You can customize your elements using content and style, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this element.

General tab

The text that appears in the button.

Click the plus sign to enter a link. Visitors clicking the button will open the link. 

Open in a new tab: If the Button contains a link, toggle on if you want the link to open in a new tab.

Allows you to tag individual elements on a page. This way you can link to this specific element.

Style tab

See the individual articles on Style options:

 

Op deze pagina

Deel dit artikel

Hosted with