[SOLVED] How do I remove the blue square that appears when I click the button on small screens?

How do I remove the blue square that appears when I click the button on small screens?

When I set the screen size to be small in Chrome dev tools or when I check my project on my phone, a blue square temporarily appears around the button when I click it. I have tried to set outline: none or outline: 0 to button, button:hover, button:focus and button:active to prevent this, but there was no visible change. I checked the styling in Chrome dev tools, but I can't figure out where this blue square comes from and how to remove it or make it invisible. Any help is welcome.

This is my HTML:

<button>
    <span class="dice-wrapper">
        <img src="./src/assets/icon-dice.svg" alt="Dice icon">
    </span>
</button>

This is my CSS:

button {
  width: 64px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  background-color: var(--neon-green);
}

button:hover {
  cursor: pointer;
  box-shadow: 0 0 40px 3px var(--neon-green);
}

button:focus, button:active {
  box-shadow: none;
}

Full code on GitHub: https://github.com/Marjolein-Kasman-de-Jong/advice-generator-app

Project on GitHub Pages: https://marjolein-kasman-de-jong.github.io/advice-generator-app/

Solution

button {
  -webkit-tap-highlight-color: transparent;
}