How to change the look of your Read More button

Last updated: May 6, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

Changing the look of your "read more" button on the blog listing page can be very useful if you want the "read more" 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 (which is accessible from Content > Content Settings > Blog > Templates > click on the name of your blog's 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="{{contact.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="{{contact.content.absolute_url}}">Read More</a>


  • Click Publish Changes.

Related articles: