Elementor How to Make the Last Link a Button Easily

Table of Contents

In this article we will learn about how to be make the last link a button easily in Elementor. Most of the time there is a need to separate out to attract more user's attention. To achieve this we need to do some CSS injection to the Elementor header template.

Follow the steps below to easily make the last link a button in Elementor.

Step 1: Open Elementor header template settings

Click on the page settings icon in the bottom left corner of the pFage. This will open up page settings to the top.

How to Make the Last Link

Step 2: Locate the header Custom CSS area

  1. Go to the advanced tab.
  2. Open the Custom CSS collapsible and add the CSS to the text below.

Elementor How to Make the Last Link a Button Easily 1

Step 3: Add The custom CSS given below

    .elementor-nav-menu li:last-of-type .elementor-item {
        display: inline-block;
    padding: 0.4em 1.6em;
    margin: 0.14em 0;
    border: 0.16em solid rgba(0,0,0,0);
    border-radius: 2em;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    text-align: center;
    background-color: rgba(0,0,0,.71);
      }

How to Make the Last Link

So, this is how the last link looks after injecting the CSS.

Conclusion

Alright! Now you know how to make the last link a button in Elementor. This will make your web page more user friendly.

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments