Der „Mehr lesen“-Button oder auch „Read more“-Button im Divi Theme ist standardmäßig kaum als Button oder Schaltfläche vom eigentlichen Inhalt bzw. Auszug des Blog-Beitrags zu unterscheiden.
Folgender im Netz entdeckter CSS-Schnipsel kann dabei helfen, eine etwas angenehmere und erfolgsversprechendere Darstellung zu realisieren.
.et_pb_posts a.more-link {
display: inline-block !important;
margin-top: 20px;
}
a.more-link {
border: 2px solid;
border-radius: 3px;
display: inline-block;
margin-top: 10px;
padding: 3px 10px;
text-transform: uppercase;
}
.more-link {
color: #114593; /* change this for font color change */
text-transform: uppercase;
width: 100%;
text-align: center;
font-size: 26px;
font-weight: 200;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
padding: 8px 34px;
line-height: 1.7em;
background: transparent;
border: 1px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
position: relative;
}
a.more-link {
background-color: #ffffff; /* change this for background color change */
border: 1px solid #114593; /* change this for border color change */
color: #114593 !important; /* change this for font color change */
font-weight: 400;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
padding: 8px 34px;
line-height: 1.7em;
}
a.more-link:hover {
background-color: #114593; /* change this for background:hover color change */
border: 1px solid #ffffff; /* change this for border:hover color change */
color: #ffffff !important; /* change this for Font:hover color change */
padding: 8px 24px 8px 34px !important;
}
a.more-link:after {
font-family: 'ETmodules';
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
position: absolute;
-moz-transition: all .2s;
-webkit-transition: all .2s;
transition: all .2s;
}
a.more-link:hover:after {
opacity: 1;
display: inline-block !important;
font-family: 'ETmodules';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: 8px;
}