How to create a Divi read more blog button

With the Divi blog module you can activate a read more link for your blog posts, but unfortunately, there is no option to transform this in a read more button. In this tutorial, we are going to change the Divi read more text link into a button. I am also covering how you can do this with the pagination buttons.

Read more and pagination links

We are going to start with the read more button.

Divi Read more blog button

First, you need to enable the read more link in the Divi blog module. Open the blog module and under element, you can enable the show read more button.

Activate read more button

To transform the read more text link into a button you can place the following CSS in Divi > Theme Options > CSS or in you Divi child theme CSS stylesheet.

/* Read more blog button */

.more-link {
    background-color: #1f568e;
    display: inline-block !important;
    color: #fff;
    padding: 5px 15px;
    margin-top: 15px;
    text-transform: uppercase;
}

.more-link:hover {
    background-color: #3683d2;
}

Refresh and clear your browser cache and your read more link looks now like this.

Read more button result

To change the background color you can change the color code in the CSS.

Pagination buttons

For the pagination buttons you can use the folllowing CSS code:

/* Pagination buttons */

.pagination .alignleft a,
.pagination .alignright a {
    background-color: #1f568e;
    display: inline-block !important;
    color: #fff;
    padding: 5px 15px;
    text-transform: uppercase;
}

.pagination .alignleft a:hover,
.pagination .alignright a:hover {
    background-color: #3683d2;
}