SOURCE

// function myOnClick() {
//     console.log('I am in the global scope')
// }

window.myOnClick = function () {
    console.log('on click')
}

<div class="parent">
	<h3>Parent</h3>
	<div class="child">
		<h3>Child</h3>
		<button onclick="myOnClick()" type="button">
            Call to action
		</button>
	</div>
</div>

body {
    background-color: #ffdc42;
}

.parent,
.child {
    background-color: #fff;
    padding: 1rem;
    border: 2px solid #0a0a0f;
    border-radius: 0.5rem;
}

.parent {
    margin: 1rem;
    width: 60%;
}

.child {
    margin-top: 1rem;
}

.child button {
    margin-top: 1rem;
    background-color: #11b62c;
    color: #fff;
    padding: 0.5rem;
    border: 2px solid #06891c;
    border-radius: 0.5rem;
    cursor: pointer;
}

.child button:hover {
    background-color: #06891c;
    border-color: #11b62c;
}

.child button:active {
    background-color: #11b62c;
}