# Change header's custom style
* Create a button element using HTML. Paste the following code on the HTML code editor tab:
```html
```
* Add the logic to change the header's style upon clicking the button:
```javascript
const button = document.querySelector("#color");
button.addEventListener("click", () => {
const event = new CustomEvent("widget_changeHeaderColor", {
detail:{
"backgroundColor": "#00bcd4",
"borderRadius": 7,
"color": "#ffffff",
"boxShadow": "3px 3px 5px 6px #cccccc",
"fontWeight": "bold"
}
});
document.dispatchEvent(event);
});
```
Save the widget's settings by clicking on the green check mark. The result is shown below:
