Step 1. Open Weebly's HTML/CSS editor

Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.

---

Step 2. Add the CSS codes below

Click on "main-style.css" on the left and add the codes below to the file on the right.

The instructions for customizing the button to match your site's theme are in bold.

​/* Blog Read More Button
------------------------------------------------------------------------------------------------------*/

.blog-post .blog-read-more {
    background: #A9E4F8; /* Changes the color of the button's background */
    width: 200px; /* Changes the button's width */
    text-align: center; /* Changes the button's text alignment */
}

.blog-post .blog-read-more a {
    color: #fff; /* Changes the color of the button's text */
    display:block;
    padding: 13px 0px;
}

.blog-post .blog-read-more a:hover {
    color: #fff; /* Changes the color of the button's text when it is hovered */
    background: #e0915c; /* Changes the color of the button's background color when it is hovered */
}

---

You're done! Publish your site to see your new "read More" blog button!

---

comments powered by Disqus