Hi team,
We've tried to style the button to be centred on the page, but it doesn't seem to work. Is there any chance anyone can help admen the CSS code for it to actually trigger and center itself on the page?
Thanks,
Code:
<!-- Add CSS style to make the button on brand -->
<style>
#eventbrite-widget-modal-trigger-712614187217 {
font-size: 20px;
padding: 10px 20px;
background-color: #5e4936;
color: white;
border: none;
cursor: pointer;
/* Center align the button */
display: flex;
justify-content: center;
align-items: center;
}
</style>
<!-- Noscript content for added SEO -->
<noscript><a href="https://www.eventbrite.ca/e/bespoke-market-in-squamish-tickets-712614187217" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<button id="eventbrite-widget-modal-trigger-712614187217" type="button">Buy Tickets</button>
<script src="https://www.eventbrite.ca/static/widgets/eb_widgets.js"></script>
<script type="text/javascript">
var exampleCallback = function() {
console.log('Order complete!');
};
window.EBWidgets.createWidget({
widgetType: 'checkout',
eventId: '712614187217',
modal: true,
modalTriggerElementId: 'eventbrite-widget-modal-trigger-712614187217',
onOrderComplete: exampleCallback
});
</script>