JSFiddle - React, Tailwind, and code Playground

HTML

Try to click on black pixels of the underscore <i>and release the mouse <b>below</b> it</i> (but still within the button) - or vice-versa:<br>
<button onclick="clickHandler()"> click me ___ </button>

<hr>

Alternatively, click on the "empty" part of the button and release the mouse on the image (the other way rould would start to drag the image):<br>
<button onclick="clickHandler()"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></button>

CSS

button {
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
}

JavaScript

function clickHandler() {
    alert("clicked!");
}