XF 2.2 Create a button in HTML widget

[DaveL]

Good evening,
Hoping someone might be able to help. This is one of my HTML widgets:

<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.

 

[Old Nick]

<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]

<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?

 

[Old Nick]

These are the 4 basic XenForo buttons.
If you want custom buttons you will have to create them from scratch with HTML and CSS.

 

[Paul B]

You can use the default button classes and apply custom styling inline.

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

 

[Old Nick]

Great !

 

[MapleOne]

You can use the default button classes and apply custom styling inline.

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

I have a custom button with custom styling but for some reason when I specify the button color I cannot get the hover color to change.
I tried everything I could think of, what can I do to get a hover color?

The code I am using is below...

<a href="https://mydomain.com/event"

class="button button--summit" style="font-size:20px; background-color: rgb(221,70,118); a.hover-color: rgb(221,270,188);  border-color: rgb(221,70,118); padding: 0.45rem 4rem;">