XF 2.2 Create a button in HTML widget

DaveL

Well-known member
Good evening,
Hoping someone might be able to help. This is one of my HTML widgets:
button.png

HTML:
<div style="color: black; padding: 0 4px;  text-align: center;">

<br><br>
<img src="https://xlightsseq.com/testsite/images/christmas.png" alt="xLights Paid Halloween Sequences" width="80%" height="80%";>
    <center><b>Free Christmas Sequences</b></center>
</div>

I'd like to place the text 'Free Christmas Sequences' inside a button that will make it more visable and also takes the user to the linked page when clicked.
If anyone can point me in the right direction it would be greatly appreciated.
 
Solution
You can use the default button classes and apply custom styling inline.

HTML:
<xf:button href="your_url" class="button button-cta" style="background-color: orange; color: black; border-color: green">Free Christmas Sequences</xf:button>

Nicolas FR

Well-known member
HTML:
<xf:button href="your_url" class="button button-cta">Free Christmas Sequences</xf:button>
You can use button button--cta, button button--primary, button button--link or just keep button for the class="..."
 

DaveL

Well-known member
HTML:
<xf:button href="your_url" class="button button-cta">Free Christmas Sequences</xf:button>
You can use button button--cta, button button--primary, button button--link or just keep button for the class="..."
Thank you, that's worked a treat!
Do you happen to know how I would go about changing the colour of the button or the text displayed within it at all?
 
Top