Can FullCalendar customButtons have custom colors

Question

We are adding custombuttons to our fullcalendar like below.

Is there a way to change the background and foreground color of the button?

And is there a way to set padding or margins to the custom buttons?

var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
  text: 'custom!',
  click: function() {
    alert('clicked the custom button!');
  }
}
},
 headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});

Answer 1

Yes, you can set any properties you like using CSS.

On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.

For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:

.fc-myCustomButton-button
{
  background-color: red !important;
}

(You need the !important so that fullCalendar's other CSS rules don't override it.)

Demo: https://codepen.io/ADyson82/pen/WNJqXLM