html - 更改我的 HTML Eventbrite 按钮的颜色和大小

Question

Eventbrite 给了我一个 HTML 代码按钮，可以嵌入到我已经完成的 Thrive Architect 网站上。但是，该按钮很小，呈灰色，并不突出。所以我需要将按钮的颜色更改为绿色，并且需要使按钮的尺寸更大。另外，我想让字体加粗。

这是他们给我的代码，我需要对其进行自定义(我已经尝试对其进行自定义超过 24 小时，进行了广泛的研究并按照我的方式进行了尝试，但是每当我更改代码中的任何内容并保存它时，这出现在按钮 "[/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>

Answer 1

您只需要添加一些针对此元素的 CSS。获取按钮的 ID，并在下方包含您希望按钮的外观。像这样:

#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>