Community Forums › Forums › Archived Forums › Design Tips and Tricks › Read More button
- This topic has 8 replies, 2 voices, and was last updated 11 years, 1 month ago by
Chris Moore.
-
AuthorPosts
-
December 29, 2013 at 12:45 pm #81864
pperkins81
MemberI'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.
http://paulperkins.com
Thanks,
PaulDecember 29, 2013 at 1:30 pm #81874Chris Moore
MemberHello 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.comDecember 29, 2013 at 1:43 pm #81879pperkins81
MemberIt worked! Do you know how I can change the color of the font to white?
December 29, 2013 at 1:46 pm #81881Chris Moore
MemberIt 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.comDecember 29, 2013 at 1:48 pm #81883pperkins81
MemberAlso, is there some way to move the box down a bit? It's hugging the excerpt text pretty closely.
Thanks a lot!
December 29, 2013 at 1:55 pm #81889Chris Moore
MemberWhere 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.comDecember 29, 2013 at 2:10 pm #81896pperkins81
MemberSorry 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!
December 29, 2013 at 3:06 pm #81911pperkins81
MemberI 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;
}December 29, 2013 at 3:18 pm #81915Chris Moore
MemberIf 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 -
AuthorPosts
- The topic ‘Read More button’ is closed to new replies.