Demo: CSS pointer-events

<div class='container'><div class='overlay'></div><button class='clickable'>Click Me!</button></div>

.container { position: relative; width: 300px; height: 200px; border: 2px solid #333; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); pointer-events: auto; }
.clickable { position: relative; z-index: 1; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }

// No JavaScript required for this demo