Button for embedded script doesnt match site styles. Why?

Site URL: https://www.pridechorus.org/events/spring-into-action

I have an issue I haven't had in the past. I use this embed code from Eventbrite to have an embedded checkout on this page. In the past, this code has worked to make the button style match the normal style for my site. However, suddenly when I used it this time, the button has a bevel/shadow thing and doesn't match the site style. I don't really konw much about coding or CSS. It's just always worked before. Any idea what is going on here?

Here is the code:

<!-- Noscript content for added SEO -->
<noscript><a href="https://www.eventbrite.com/e/spring-into-action-tickets-244595430517" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<center><button id="eventbrite-widget-modal-trigger-244595430517" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" type="button">Buy Tickets</button>
<noscript>Buy Tickets on Eventbrite</noscript></center>

<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '244595430517',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-244595430517',
        onOrderComplete: exampleCallback
    });
</script>

Add to Design > Custom CSS

button[id*="eventbrite"] {
    box-shadow: none !important;
    border: none !important;
}

On 3/6/2022 at 5:32 AM, tuanphan said:

Add to Design > Custom CSS

button[id*="eventbrite"] {
    box-shadow: none !important;
    border: none !important;
}

 

I'm trying to use this code on my site for the same issue (not eventbrite) and although I added the button ID, it still isn't dropping the shadows or borders. any ideas?

my code:

<a href="https://compelcommunitychurch.churchcenter.com/people/forms/391625" data-open-in-church-center-modal="true">
<button class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element"
        type="button">
    SIGN UP HERE
</button>
</a>

13 hours ago, hrobb said:

I'm trying to use this code on my site for the same issue (not eventbrite) and although I added the button ID, it still isn't dropping the shadows or borders. any ideas?

my code:

<a href="https://compelcommunitychurch.churchcenter.com/people/forms/391625" data-open-in-church-center-modal="true">
<button class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element"
        type="button">
    SIGN UP HERE
</button>
</a>

Try this code

a[href*="churchcenter"] button {
    box-shadow: none !important;
    border: none !important;
}