There are so many design options when styling your blog pages on your Divi website. One option is to add a read more button to the bottom of your excerpt. We want to show you three ways to style your blog buttons. It is just a case of adding a little CSS!

Bold Button with Background

    1. Head over to the Divi Builder and select your blog module.
    2. Under the Content tab switch on the read more button.

    1. Go to  advanced -> Custom CSS -> read more button.

  1.  Add the following lines of CSS

text-transform: uppercase;
background: #000;
color: #fff;
padding: 8px;
width: 130px;
font-family: open sans;
font-weight: bold;
font-style: normal;
text-align: center;
margin-top: 1rem;
border: 1px solid black;

 

Now for the hover.

(1) Go to your Divi page settings

(2) Under Custom CSS add the following lines of code:

.et_pb_post .more-link:hover{
color: #000;
background: #fff;
border: 1px solid #000;
}


 

Blush Script Button

Add the following lines of CSS to the Advanced tab in you Blog Module:

background: none;
color: #dab7ad;
padding: 8px;
width: 140px;
font-family: sacramento;
font-weight: bold;
font-style: normal;
font-size: 26px;
text-align: center;
margin-top: 1rem;

In your Divi page settings add the following code to the Custom CSS box for the hover:

.et_pb_post .more-link:hover{
color: #000;
background: none;
}


Watercolour Background Button

You will need to download the watercolour image and add it to your media gallery before you start. Download Here. (Click and right click to save the image)
Then you need to replace the image URL in the code below with the link from your media gallery.

Add the following lines of CSS to the Advanced tab in you Blog Module:

text-transform: uppercase;
background: url('https://yourimageURLhere');
background-repeat: no-repeat;
color: #000;
padding: 4px 16px 8px 0px ;
width: 125px;
font-family: open sans;
font-weight: bold;
font-size: 14px;
font-style: normal;
text-align: center;
margin-top: 1rem;

In your Divi page settings add the following code to the Custom CSS box for the hover:

.et_pb_post .more-link:hover{
color: #444;
}

You can easily customize the colours to suit your own tastes. Simply change the background and colour line to your prefered colours.