How to change the look of your Read More button

Last updated: February 10, 2018

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

Changing the look of your Read More button on the blog listing page can be very useful if you want this button to stand out.



  • Create a CSS class that will hold the styling for the read more button. Add this class and any custom styling into your stylesheet.
  • Example code: 
background: blue;
border-radius: 10px;
color: white;
  • Go to the template builder and locate your blog template. In the blog content module click the Edit Listing Template button to access the listing page HTML.


  • Locate the following code within the listing template HTML:
<a class="more-link" href="{{content.absolute_url}}">
  •  Replace the more-link class with your new read-more-btn class. The code should now look like this:
<a class="read-more-btn" href="{{content.absolute_url}}">Read More</a>


  • Click Publish Changes.

Was this article helpful?