[SOLVED] Change the colour and size of my HTML Eventbrite button

Change the colour and size of my HTML Eventbrite button

Eventbrite have given me an HTML code button to embed onto my Thrive Architect website which I have done. However, the button is tiny, and grey, and doesn't stand out. So I need to change the colour of the button to green and I need to make the size of the button bigger. Also I'd love to make the font bold.

Here is the code they gave me, which I need to customise (I have been trying to customise it for over 24 hours, done extensive research and tried it my way but whenever I change anything in the code and I save it, this appears next to the button "[/tcb-noscript]

<!-- Noscript content for added SEO --> <noscript><a href="eventbrite.co.uk/e/…" rel="noopener noreferrer" target="_blank"></noscript> <!-- You can customize this button any way you like --> <button id="eventbrite-widget-modal-trigger-57878905364" type="button">Buy Tickets</button> <noscript></a>Buy Tickets on Eventbrite</noscript>
<script src="eventbrite.co.uk/static/widgets/eb_widgets.js"></…> <script type="text/javascript"> var exampleCallback = function() { console.log('Order complete!'); }; window.EBWidgets.createWidget({ widgetType: 'checkout', eventId: '57878905364', modal: true, modalTriggerElementId: 'eventbrite-widget-modal-trigger-57878905364', onOrderComplete: exampleCallback }); </script>

Solution

You just need to add some CSS that targets this element. Grab the ID of the button, and include underneath how you want your button to look like. Like so:

#eventbrite-widget-modal-trigger-57878905364 {
  font-size: 2rem;
  background: green;
  color: white;
  border: 0;
  border-radius: 25px;
  padding: 5px 20px;
}

<!-- HTML only cut down for the example -->
<button id="eventbrite-widget-modal-trigger-57878905364" type="button">Buy Tickets</button>