Simple, does the work

I, too am a big fan of George’s great plugin, Read More Without Refresh, and have been for years.

Importantly, George’s plugin can be easily styled by writing some custom CSS. In case you’re not familiar with the Web Developer Tools that are included with many browsers (I use Mozilla Firefox) they are invaluable for identifying the selector(s) associated with any object displayed on the screen. In Firefox and Chrome the tools are directly accessible by keying in <F12>. Edge provides developer tools also, but they are only indirectly available by keying in <F12>.

Knowing the proper selector(s) to use, you can style George’s plugin to your heart’s content. Here’s an example of how I have styled the Read More Without Refresh plugin on my HOA’s website:

/*********************** BEGIN Read More Without Refresh */
.read-link {
border: 1px solid green !important;
border-radius: 12px;
padding-left: 10px !important;
padding-right: 10px !important;
font-size: 85%;
}

.read-link:hover {
color: red !important;
}

.read_div {
margin-top: 10px;
padding: 10px;
border: 1px solid #336633;
border-radius: 15px;
background-color: rgba(0,0,0,0.03);
}
/************************ END Read More Without Refresh */

This styling spruces up the Read more button, places a border with rounded corners around the newly-displayed content and slightly shades the internal background to subtly set off the new content. I think it really helps the user understand just where they are on the page. Notice that the objects are classes, so the styling is good for all instances of the plugin.

Sorry, our HOA is a membership site, and all the examples are on private pages, so I can’t provide a link.