Style The Divi Blog ‘Read More’ Links Like A Button

The Divi Theme is a great tool with a simple interface and lots of ways to style the modules to fit your brand’s look and style. That being said, there are some small things that probably could be added.

The “Read More” links in the Divi Blog Module only inherit the styling of basic links. This can make them hard to spot when visitors browse your site’s blog — and we all know that user interface (UI) is incredibly important.

Catching the user’s eye with buttons instead of plain links encourages visitors to quickly spot where they need to click to read your articles.

In this tutorial, I will show you how to style the “Read More” links in the Divi Blog Module to look like buttons!

View the Live Snippet here on the Food Bank of the Southern Tier website.

Creating the Module

  1. When you add the Blog Module, make sure you switch the Show Read More Button to Yes.

  2. Now open the Advanced Tab and under the CSS Class: give the blog module the following class: fs-custom-blog

  3. Select the Save & Exit button and update the page.

Adding the Custom CSS

Here at FreshySites we use a child theme, so you would need to go to Appearance > Theme Editor to find the stylesheet.

If you don’t have a child theme, go to Divi > Theme Options > Custom CSS.

Add this CSS:
/* -- FS Blog & Posts -- */
/* styles the 'read more' link to look like a button */
.fs-custom-blog a.more-link {
margin-top: 15px;
display: inline-block;
text-transform: uppercase;
font-size: 22px;
font-weight: bold;
line-height: 1em;
letter-spacing: 1px;
background: #fdbf01;
padding: 10px 30px;
color: #ffffff!important;
text-align: center;
min-width: 175px;
max-width: 215px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
transition: all .2s;
.fs-custom-blog a.more-link:hover {
background: #6ca973;
It’s as simple as that.

Keep in mind that you can change or add properties to fit the style of your site.

The example above is just matching the style of the example site.

You can even remove the fs-custom-blog class to change the styles globally so you don’t have to always add a class to the Blog Module.

See our featured website design work

Check out some of the beautiful websites we’ve built for over 2,000 clients.

We offer WordPress support & maintenance

Shake the stress of ongoing maintenance with plans supported by our team of WordPress experts.

Related articles