Create elliptical button [like demo]
-
I’d like to create the same elliptical/ovular shaped button that appears in the Collective demo. (Example: “Read more” from the demo’s landing page).
Here’s where I need to create it:
1. My homepage
2. Books–//The Feedback FixI want it to appear in the following color: HEX: 00ccff (sky blue). No fill, just the colored outline of the button and text.
The blog I need help with is: (visible only to logged in users)
-
The standard More Tag styling is the elliptical button. Insert a Read More tag into your pages and it will appear as an elliptical button.
-
Not quite what I’m trying to do here. Can you check out http://www.joehirsch.me and see the landing page as an example? I want to insert a “Read More” button – formatted like the elliptical shape – in the specific color shown there. Do I need custom CSS code?
-
Hi, the normal “Read More” link is styled that way, but since you have inserted linked text so that you can link it to a different URL, we have to add a CSS class to the linked text HTML. Open that page in the editor, swtich to the HTML/Text tab and find this.
<a href="http://joehirsch.me/book-flyer/"><span style="color: #00ccff;">READ MORE</span></a>
Make it look like this.
<a class="more-link" href="https://joehirsch.me/book-flyer/"><span style="color:#00ccff;">READ MORE</span></a> -
Thanks! But how do I make the outline of the ellipse the same color (00ccff) as the outline? And now there’s an awkward gap between the button and the text above…how do I bring the button up so that it sits just below the text?
-
Hi there, looking at your site and your custom CSS, I see you have gotten this taken care of it looks like. Let me know if I am mistaken.
- The topic ‘Create elliptical button [like demo]’ is closed to new replies.
WordPress.com Forums 