Calendry Widget text turn into button that matches enfold

Hi joandjaxx,

On the Book Now, you can add this:
class=”avia-button avia-size-large avia-color-purple”
Here’s the code:

<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/joandjaxx?hide_landing_page_details=1&hide_gdpr_banner=1'});return false;" class="avia-button avia-size-large avia-color-purple">Book Now</a>

Hope it helps.

Best regards,
Nikko

• This reply was modified 1 year, 11 months ago by Nikko.

Hi joandjaxx,

To make it extra large, replace avia-size-large with avia-size-x-large
For color, replace avia-color-purple with my-custom-color (or name it however you like)
Then go to Enfold > General Styling > Quick CSS:

#top .avia-button.my-custom-color {
    background-color: #333;
    color: #fff;
}

Just adjust the colors as you see fit (color is for text color).
Hope this helps.

Best regards,
Nikko

Hi joandjaxx,

Try to add border: none; to the last code I gave:

#top .avia-button.my-custom-color {
    background-color: #e39a59;
    color: #fff;
    border: none;
}

Hope it helps.

Best regards,
Nikko

Hi joandjaxx,

You can add a hover to it, by adding this CSS code (just adjust the colors):

#top .avia-button.my-custom-color:hover {
    background-color: blue;
    color: #fff;
}

Best regards,
Nikko