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.

This download gets you the following template :

Elementor Read More Button Template

Related tutorial : Elementor Read More Button

Name your price $

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 instead of any code above. 

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!

60 Responses

  1. What difference does this extra css make? I set this up without it and it seemed like it worked pretty similar to with it. Also, is there any way to have a "Read Less" option that collapses the content back?

    1. The CSS is there to make the toggle title disappear after being clicked. The other CSS snippet styles the toggle title to look like a button.

    1. Add this to your CSS !

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

  2. Brilliant... on e question... is it possible to smply invert the toggle? Therefore the toggle title ends up at the bottom of the screen for when they finish reading. The toggle title can read "see more/less".
    Is this possible?
    Thanks!

  3. I finally found your solution and was very happy with the "Read Less" button. But for some reason it stopped working for me on the published page.

    When i am on elementor editor, it works fine on the preview, but when a visualize the published page, the "Read Less" button doesn't show. Tested on two different elementor instances.

    1. Maxime Desrosiers thank you for your answer. Actually I had sent a ticket to the elementor team and they answered me this:

      "I'm afraid the read less button doesn't appear in the live site because Elementor hides this when the toggle is active, please try to add the following custom CSS in the advanced tab of the toggle widget and let us know if this helps:"

      body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active {
      display: block !important;
      }

      For what I could see the only thing different from your code was the "block !important;" section.

      Now it's working.

      Many Thanks!

    2. Douglas Dinarte
      where did you put that code? I mean after which line?
      I am trying your solution but still getting the same thing.
      That is, it is not working in published page but working fine in elementor editor.

  4. Hi, thanks for the code, helped alot! My question is: can you add a hover effect to the 'Read less' text? Without a proper change of color on hover it may be unrecognized as a clickable text by the user... Thanks in advance!

    1. Yep! Use this CSS:

      .readmorechanging .elementor-tab-title.elementor-active:hover::before {
      font-weight: 900;
      color: #767676;
      }

  5. Thank you so much for this!

    Do you know if it's possible to make the text stretch out and float over the section below it once "READ MORE" is clicked instead of behaving like an accordion within the section it is in?

    1. Great idea! You should still create that extra content following the instructions above, and then simply add this code. It will display as normal paragraph on desktop, and have the 'read more' on mobile.

      @media (min-width:767px){
      .readmoretoggle .elementor-tab-title{
      display:none!important;
      }
      .readmoretoggle .elementor-tab-content{
      display:block!important;
      }
      }

  6. For some reason I can't get the "Read less" button to show up...

    I put the css under the advanced tab of the toggle widget.

    1. I got it to work as it should. I removed this bit of css, since it hide the whole title element and also the Read less link:

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

  7. Hi! First off, thank you so much for making this. It is a great help! However, I've tried implementing both the "Read More" button and the "Read Less" button and I am expereinceing issues on both. The text of the "Read More" Button is just not showing up and the "Read Less" function works fine in the editor, but doesn't work on the actual page. I've linked the page in question and a photo of the code so that you can help me see where I wen wrong. Thank you!

    https://universalaccountingschool.com/meet-our-team/
    https://imgur.com/gallery/YqdWF5T

    1. Hey Ryann!

      When we inspect the read more buttons on your page, we see that there is no text at all there... it looks like this

      instead of

      Read more

      I don't know why that is... but it's not because of my code, as CSS doesn't even have the ability to add or remove HTML on a page...

      Maybe some plugin conflict? Maybe refresh your servers? Not certain what's the problem ....

  8. Does anybody know if you can have different margins and padding for the toggle title and toggle content when its open and closed?

  9. Thank you so much for your help!
    One question - if I have more than one Toggle Widget on the page, it affects the other Toggles too, which isn't suitable for my FAQ section, which now is composed of buttons instead of just questions.
    Even though I specifically used CSS class "readmoretoggle" on the correct toggle, the other FAQ Toggles are affected too by the change.
    How can I overcome this?

    1. Welcome!

      This really should not be happening... All the code I provide in the article have the specifier class 'readmoretoggle' . So unless the toggle element itself has that class, or a parent of the toggle element (like the parent section) has it, then the CSS would not modify these.

    2. Maxime Desrosiers Thank you for your quick reply! Yeah I figured it shouldn't happen... I inserted the CSS code into WordPress > Appearance > Customize, then Additional CSS as you suggested to make this run on the entire site, maybe I should just put it under Additional CSS for the specific Toggle Widget?
      The FAQ Toggle doesn't have the readmoretoggle class in it's Advanced properties, nor the parent section.

      Can you please have a look in the code I inserted? and maybe you will find something I missed? I'm a newbie in CSS so I wouldn't be surprised...

      /** Read more toggle **/

      body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
      display: block !important;
      }

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

      /* button styling below */
      .readmoretoggle .elementor-tab-title.elementor-active::before, .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(23,84,62,.71); /* button color */
      transition: all 0.34s ease;
      }

      /* hover button styling */
      .readmoretoggle .elementor-tab-title.elementor-active:hover::before, .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 */
      }

      .readmoretoggle .elementor-tab-title.elementor-active::before {
      content: 'Close';
      font-family:rubik;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      }

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

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

      /** End Read more toggle **/

  10. on the mobile version, the read more button disappears after clicking on it, so I can't cloase the drop down anymore afterwards. (I haven't put in the "read less"-css). Can you imagine, where the bug could be?

    1. Hmm... just write in the text you want as the toggle title ? Then you use the styling options to make the text white? I'm not certain what you are asking here...

  11. Is anyone having issues on the focus on Safari browsers? When I click on the "Read Less", it does not focus on "Read More" anymore.

    1. Add a negative top margin, like this :

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

      .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;
      }

  12. Hi there Maxime,
    Thank you for this implementation!! I use this in a toggle and it works great.
    I also made the Toggle title staying on top, by removing the appropriate section.
    That way it doesn't throw off in any way the readers.
    I would like your input if you could pls on the following:
    1. How can I have a 'Read More' appear under the title of the Toggle so that ppl know there's more content, (i've removed the Toggle icon)?
    2. Finally, how can I transfer the 'Read Less' appear UNDER the content, not on top of it??

    Thank you for any suggestions, I really appreciate your time:-)

    1. Hey ! I think I understand what you are after, but unfortunatelly there is not simple way to achieve this, just by modifying slightly the 'toggle' element (Which is what this tutorial is about)

      To get the kind of customization you want, you would be better to just code directly precisely what you need, using JavaScript.

    2. Maxime Desrosiers Thanks for getting back to me - I really appreciate it. I was afraid this may be the case...I may just stick to what I achieved so far 🙂

    3. Maxime Desrosiers Hi again, just to let you know I was able to put the 'Read Less' at the bottom of the expanded content by just placing an 'after' on the .readmoretoggle .elementor-tab-title.elementor-active::after { ....piece of code:-) Cool...!

  13. Is there any way to make centered "Read more" / "Read less" button? Basically it is the combination of codes you mentioned in article, but somehow I can't make it work.

    1. Just adding this should work :

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

  14. The read more CSS below works fine for me, but what additional CSS I have to use for multilanguage? (I need only one more)?
    In other words, how can I change content: 'Read Less' depending on lang(it) or lang(us)?

    .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;
    }

    1. Hey Ezio! For this, you will need to right click > inspect your page, and see what class name is added to the <body> tag element, that specifies the current language.

      Then, write the CSS like this :

      .fr .readmoretoggle .elementor-tab-title.elementor-active::before {
      content: 'Lire moins';
      }

      .en .readmoretoggle .elementor-tab-title.elementor-active::before {
      content: 'Read Less';
      }

Leave a Reply