When I set the screen size to small in Chrome Developer Tools or when I review my project on my phone, a blue square temporarily appears around the button when I click on it. I tried setting o outline: none , and preventing this, but there was no visible change. I checked the styling in Chrome Developer Tools, but I can't figure out where this blue square is coming from and how to remove it or make it invisible. Any help is welcome. outline: 0buttonbutton:hoverbutton:focusbutton:active

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/