Elementor Read More Button The Simple Way

No extra plug-ins required! Elementor Free Compatible!

Here is how to transform the the toggle element into a 'read more' button, with a nice and smooth animation. It will work for every toggle element on the page that has the class name 'readmoretoggle' added.

Indeed, it works just fine! and the read more trigger disappears, acting like a true 'read more' button, rather than a toggle element.

Using CSS, you can also style it to look exactly like a button... CSS provided below to get the same look as the button you clicked.

To begin with, insert the toggle element where you want the 'read more' to show up

Elementor Read More Button - No Extra Plug-Ins Needed!

Then, style it properly, and give it the class name 'readmoretoggle' under 'Advanced'

Keep only one toggle, and remove the icon (if you want). If you prefer the 'button' styling, remove the icon and use the CSS provided below. You will still need to remove the border and padding.

Elementor Read More Button - No Extra Plug-Ins Needed!

You can style it to look the way you want, but you will most probably want to remove the border and the padding, so that it looks consistent with the paragraph that was above.

Elementor Read More Button - No Extra Plug-Ins Needed!

Add the CSS class 'readmoretoggle'

Elementor Read More Button - No Extra Plug-Ins Needed!

Finally, add this CSS on the same page as is the read more toggle element(s)

If you want this only on one page, you can add the custom CSS to the Page Settings > Advanced > Custom CSS . Page settings are at the lower left gear icon.

If you want the same behavior across your entire website, simply add the CSS in the theme customizer > Additional CSS (from WordPress > Appearance > Customize, then Additional CSS)

body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;

To center it, use this code instead

body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;

.readmoretoggle .elementor-toggle .elementor-tab-title {
display: flex;
justify-content: center;

If you prefer the read more to look like a button, use the CSS below instead

body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;

/* button styling below */
.readmoretoggle .elementor-tab-title a{
padding:0.4em 1.6em;
margin:0.14em 0 ;
border:0.16em solid rgba(0,0,0,0);
color:rgba(255,255,255,0.9); /* button text color */
background-color: rgba(0,0,0,.71); /* button color */
transition: all 0.34s ease;

/* hover button styling */
.readmoretoggle .elementor-tab-title a:hover{
color:rgba(255,255,255,1); /* change color of text when hovering */
transform: scale(1.03); /* delete to remove the zoom in effect */

You can adjust the styling of the Elementor Read More button by modifying the CSS code to fit your needs.

Also note that the 'Read more' text will still show up while in editor mode. This allows for easier editing of the styling.

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

Addons Resources
Finder Tool
Discount Codes
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>