Can't change the color of a link text

Hi everyone!

I’m struggling to change a color of an href link (“Book a call”) that I have imported as a custom code. I tested the usual links by creating a “Link Button” element, adding it button-primary class and overriding the color afterwards - it worked.

Here, I have a custom link from Calendly. The button-primary class adds the background and transition, but I can’t figure out how can I update the link color. On the screenshot below I put it to red (just as an example), but it doesn’t really work. I guess it takes the styling from that stylesheet in the code? What’s the best way to override it?

Here is the code I put into that Embed element:

<!-- Calendly link widget begin -->
<div id="calendly-div" onclick="openCalendly(event)">
    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
    <a href="javascript:void(0);">Book a call</a>
</div>
<!-- Calendly link widget end -->

<script type="text/javascript">
    function openCalendly(event) {
        event.preventDefault();
        Calendly.initPopupWidget({
            url: 'https://calendly.com/mstephan/jobagentpro-45min?hide_event_type_details=1&hide_gdpr_banner=1'
        });
    }
</script>

This is the site: Redirect

Ok, this post played a role of a rubber duck :sweat_smile:

I’ve added a class to that embedded button (I’m not a Web Eng, so I didn’t think about it from the beginning).

Next step is to figure out if I should find a way to update the existing class or if I should better create a new one not to break existing items.

<a href="javascript:void(0);" class="link-arrow-white">Book a call</a>