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.

This one is like the regular toggle element, but the toggle text stays above the button, acting closer to a proper 'read more' and 'read less' button.

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{
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); /* button text color */
text-align:center;
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.

Finallly, to get the 'Read More' button becoming 'Read Less', use the code below. 

You can change the 'Read Less' text to anything you want by modifying the code.

You will also have to enter the styling for the 'Read less' text directly in the code, as what you set up under the 'Styling' tab won't apply automatically.

In short, change the first part of the code to what you want the 'Read Less' to look like. 

.readmoretoggle .elementor-tab-title.elementor-active::before {
    content: 'Read Less';
    font-family:roboto;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    }

.readmoretoggle .elementor-toggle-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column-reverse;
}

.readmoretoggle .elementor-tab-title.elementor-active a{
    display:none;
} 

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
Addons
Resources
Addons
Finder Tool
Addons
Discount Codes
Addons
Review
< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Element Or Codes>