Elementor How to Make the Last Link a Button Easily

Elementor How to Make the Last Link a Button Easily

Check out our CSS Course, made especially for Elementor users.

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

    selector .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.

To get a different look, you can either edit the CSS, or generate some with this CSS button generator.

Conclusion

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

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

2 Responses

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.