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:

Image showing read more links

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.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This