Convert text into a button
-
How do I convert the ‘Read more’ text and down arrow ‘v’ to a button using Collapse-O-Matic?
-
You need to be more clear.
If you want to change the read more text, this is controlled using the title attribute as clearly explained in the documentation.If you want to change the down arrow to a button… not sure what you mean. change to an image of a button or a button element?
OR…
Do you want to change the entire trigger to a
<button>
element?
In that case you might try:[expand tag="button" title="your trigger text" trigclass="noarrow"]target content[/expand]
Hi Baden,
Thanks for your help, that was real help, getting close, it works well but the button doesn’t look like the rest in the website, it’s not wide enough and when I roll over the button a line appears under the text and its a bit too high in the button. This is the code for the flip down section:<p style=”text-align: center;”>[masterslider id=”5″]</p>
<p style=”text-align: center;”><span class=”about-us-headline”><span style=”color: #65513c;”>ABOUT</span> <span style=”color: #ab9c8e;”>SUNBAR</span></span></p>
<p style=”text-align: center;”><span class=”about-us-text”>At Sunbar we strive to offer you the very best personalised service with expert advice on how to improve and enhance your best features. If you’re after Adelaide’s best and most natural looking spray tan, killer Hollywood brows or luscious flirty lashes, it’s time to talk to the friendly team at Sunbar!</span></p>
<p style=”text-align: center;”>[expand tag=”button primary-button” title=”READ MORE” trigclass=”noarrow”]</p>
<p style=”text-align: center;”><span class=”about-us-text”>At Sunbar we strive to offer you the very best personalised service with expert advice on how to improve and enhance your best features. If you’re after Adelaide’s best and most natural looking spray tan, killer Hollywood brows or luscious flirty lashes, it’s time to talk to the friendly team at Sunbar!</span></p>
<p style=”text-align: center;”><span class=”about-us-text”>At Sunbar we strive to offer you the very best personalised service with expert advice on how to improve and enhance your best features. If you’re after Adelaide’s best and most natural looking spray tan, killer Hollywood brows or luscious flirty lashes, it’s time to talk to the friendly team at Sunbar!</span></p>
<p style=”text-align: center;”></p>[/expand]</p>This is the code for the buttons I have used elsewhere:
<p style=”text-align: center;”>Read More</p>
but this links to pages obviously, how do I slot that bit of code in?
Hi, I have created a website using Tesseract theme and downloaded the ‘Collapse-O-Matic’ Plugin and it worked Ok but the button I want to use is from the Tesseract theme.
See the button in question on the site (it’s obvious which one), the button also has a line under the text when you roll over it and the text is sitting to high in the button. https://www.icongraphicdesign.com.au/sunbar/staging. Thanks.Happy to help, but you should really look into the element inspector of your browser. The buttons your theme produce look like this:
<a class="button primary-button" href="https://www.icongraphicdesign.com.au/sunbar/staging/about-3/">Read More</a>
To recreate this look with collapse-o-matic you will need to NOT use the button tag as explained above, but the following:
[expand title="Read More" tag="a" trigclass="button primary-button colomat-nolink"]...[/expand]
If you can not figure out how to remove the underline via CSS hit us back and will will hold your hand some more.
See, all you needed to do was include a link to your site.
Hi Baden, thanks once again, I did place that button tag you suggested but I haven’t been able to get it to work, very green at this. Are you able to tell me what I have done wrong please?
https://www.icongraphicdesign.com.au/sunbar/stagingHi Baden, not sure why but all of a sudden the button started to work but you are right I will need help to get rid of the underline. Would appreciate your guidance with this.
add the following to the plugin’s option page under Custom CSS:
.colomat-hover { text-decoration: none !important; }
Thank you Baden, that’s great all working well now, really appreciated your assistance.
happy to help!
- The topic ‘Convert text into a button’ is closed to new replies.