The Divi Blog Module has an option titled “Read More Button.” But when you enable it, it displays a link that says “read more” in lower case. To me, that looks amateurish. Here is how to make it look like a button.

Here is a before image:

Read More Button Design

Our objective is to style the link to appear as a button as shown in the featured image at the top of the page. To accomplish this, we need to perform several tasks:

1. Convert the text from all lower case to having the first letter capitalized.
2. Display a button and style it.
3. Move the button to the bottom, right side of the card.

The Read More Button CSS Code

/* Convert Read More Links to Buttons */
.more-link {
	display: inline-block;
	text-transform: capitalize;
	float: right;
	margin-top: 10px;
	background: transparent;
	color: #0f1108;
	font-weight: 400;
	border: 1px solid;
	border-radius: 2px;
	padding: 2px 16px;
}
.more-link:hover {
	background-color: #0f1108;
	border-color: #0f1108;
	color: #ffffff;
}
.et_pb_bg_layout_dark a.more-link {
	color: #fff  !important;
}

Summary

For our client, Sugar Bush Farms HOA, we chose transparent buttons with dark grey borders that were 2px wide, that reversed colors when you hovered. You will most likely want to modify those choices to coordinate with your website.

If you have questions or suggestions for improvements, please leave them in the comment section below.

Related posts:

Divi CTA Button Opens Inline Form Using Toggle Module Smoked Glass Container on Divi Fullwidth Header Add CTA Button to Divi Default Header