Read More button

[pperkins81]

I've figured out how to create a "Read More" button at the end of a post excerpt, but I'm not sure how to turn the text into a small button. Any ideas (I'm using the Jane theme)? I'd prefer that it be black with rounded edges and white text. Any help would be appreciated.
Thanks,
Paul

http://paulperkins.com

[Chris Moore]

Hello Paul,

Let me know if this does the trick for you!

Put this code at the very bottom of your child theme's style.css file:

.read-more-news {
background: #000;
color: white;
padding: 10px;
border-radius: 10px;
}

footer.entry-footer { 
margin-top: 15px;
}

That second piece of code moves the horizontal separator line (at the end of the post excerpt) down, otherwise the button is over top of it.

Let me know if you would like any tweaks done to this solution.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[pperkins81]

It worked! Do you know how I can change the color of the font to white?

[Chris Moore]

It needs more CSS specificity...

Try this instead:

.entry-content a .read-more-news {
background: #000;
color: white;
padding: 10px;
border-radius: 10px;
}

footer.entry-footer { 
margin-top: 15px;
}

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[pperkins81]

Also, is there some way to move the box down a bit? It's hugging the excerpt text pretty closely.

Thanks a lot!

[Chris Moore]

Where there's a will, there's a way! And today I have the will! 🙂

.entry-content a .read-more-news {
background: #000;
color: white;
padding: 12px;
border-radius: 10px;
position: relative;
top: 14px;
border-bottom: none;
}

footer.entry-footer {
margin-top: 40px;
}

Also noticed you had a border-bottom on that link, so I eliminated that as well.

Does that all work now? Check on mobile as well.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[pperkins81]

Sorry for all of the questions. Is it possible to create a button with a 1 pixel border, that changes color (along with the text) when the cursor hovers over it? Hopefully this will be it!

[pperkins81]

I figured out the code for making a button that changes colors with hover. Here it is:

.entry-content .read-more-news {
padding: 8px 10px;
background: #000;
color: white;
border-radius: 3px;
border: solid 1px #000;
}
.entry-content .read-more-news:hover {
background: #666;
color: white;
border: solid 1px #666;
text-decoration: none;
}

[Chris Moore]

If you're happy, I'm happy. Glad I could help!

Make sure to mark this as "Resolved", at the top.

---

Resepctfully, Chris Moore
Web Dev, CSS Hacks, & Biz Consulting @ MooreCreativeIdeas.com / Blogging @ ReflectOnThis.com

[Author]

Posts