How to Make the Read More Link Look Like a Button in Elementor

If you are a WordPress user using Elementor to build your website, you must be familiar with the Read More link. We recently often come across some widgets in Elementor: Archive Posts and Posts widget. The Read Mor link on those widgets is for truncating the content (post), so the content is only a part displayed. Due to the limitation of the screen size is impossible to show the full content for each blog post on the Archive Posts or Posts widget.

However, we must admit that the Read More link is not as good as the Read More button. The Read More button is more intuitive, engaging, and evocative for users to click because a button has the potential things to customize more than a link. Such as padding, background, hover style, etc. This article will show you how to make the Read More link look like a button in Elementor without the help of any add-ons.

How to Make the Read More Link Look Like a Button in Elementor

Before we start the tutorial, we want to inform you that this tutorial will work with Elementor Custom CSS. The Custom CSS feature is only accessible on Elementor Pro; ensure you’ve upgraded to the pro version.

Alright. Let’s get started!

Go to your Elementor editor, and we will start everything from scratch, so create a section with a single column. Afterward, you can select the Archive Posts or Posts widget from the widget panel. In this example, we are using the Posts widget. Next, drag and drop it into the canvas area. Once you’ve added the Posts widget, you can edit and style up the widget to your preference.

Note: Please ensure you’ve already posted some posts on your site.

Once you’ve edited and styled your widget, we will make the Read More link look like a button by adding the simple CSS snippet. On the Posts widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.

selector .elementor-post__read-more{
    padding: 0.4em 0.8em;
    color: black!important;
    line-height: 2em;
    background: #33ff41;
    transition: all .5s;
    border-radius: 5px;
    font-weight: 500;
}

selector .elementor-post__read-more:hover{
    padding: 0.4em 0.8em;
    color: #f0f3f6!important;
    line-height: 2em;
    background: #0172DB;
    transition: all .5s;
    border-radius: 10px;
    font-weight: 500;
}

The code above makes your Read More link look like a button plus with a hovering effect using two selectors; .elementor-post__read-more and .elementor-post__read-more:hover. You can check the complete list of Elementor widget selectors here.

If you’re happy with the result (as in the GIF above), you can keep it like this and save or publish your project if you want to. But if you want to customize it, you can edit the property values on each selector in the CSS snippet. Such as padding, color, line-height, background, etc.

The Bottom Line

This article shows how easily you can make your Read More link look like a button using the help of Elementor Custom CSS feature. With adding a selector .elementor-post__read-more:hover on the CSS snippet, you also have a hover style on your Read More link. Customize and play around with all the properties and values in the CSS snippet until you get the best.

Last but not least, if you want a more straightforward way and don’t want to work with any codes, we have the solution for you.

Download and activate JetElements. JetElements is an excellent solution for creating a unique website with WordPress+Elementor. With the Posts widget by JetElements, the Read Link will be displayed as a button by default.

You can purchase JetElements for a single plugin or a bundle of Crocoblock plugins. Download JetElements on its official website.