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.
Step 2: Locate the header Custom CSS area
- Go to the advanced tab.
- Open the Custom CSS collapsible and add the CSS to the text below.
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); }
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.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
2 Responses
I added this code for the button to only show up on desktop:
@media only screen and (min-width:768px){
here your code ...
}
Thanks for sharing Diego!