[Divi] How to Add a Read More Button to Divi Blog Module

Divi’s Blog Module has a Read More element that you can enable to show a read more link underneath the post excerpt. However, the Read More is available a text link rather than a button. In this article we will show you how you can style that text link and make it into a button for your Blog. Let’s get started.

Step 1: Customize the Read More text Design settings

Start by customizing the Divi design settings for the Read More text. Divi offers very limited customization settings for this text but we will start with these and later write some CSS for the missing settings and effects.

You can customize the text color, font, font-size, font-weight, etc. as per your requirement.

Step 2: Convert the Read More text link into a Button

Now that we have done the basic styling available in the Divi Design settings, let’s add some CSS and magically convert the text link into a Button. So, what styling are we going to add?? We will add a background color, a border, as well as a hover effect.

Now before we give you the CSS code, you need to know where to add the code, right? So, you could add this in 2 places. The first one is the style.css of your theme and the second place is to add in the Custom CSS section of Divi. We will be adding this in the Custom CSS box. So, follow the path below:

Divi > Theme Options > Custom CSS

/*style the Divi blog read more text link as a button*/

.et_pb_post a.more-link {
  color: #ffffff;
	background: #ff4a9e;
	border: 1px solid #ff4a9e;
	padding: 8px 16px;
	border-radius: 8px;
	text-transform: capitalize;
	display: inline-block;
	float: right;
	margin-top: 1%;
	transition: all 0.3s ease-in-out;
}

/*style the Divi blog read more text link as a button on hover*/

.et_pb_post a.more-link:hover {
	background: #ff7a2b;
	border: 1px solid #ff7a2b;
	transition: all 0.3s ease-in-out;
}

That was it. Just 2 steps. Easy, isn’t it? You can choose the colors of your choice, play with shape and sizing in the above code but to give you an example, here is the result that you should see if you use the code above:

I hope you liked the article and this will be useful to you when you customize your Divi installation. Stay tuned for more how to’s…