Cuando configuro el tamaño de la pantalla para que sea pequeño en las herramientas de desarrollo de Chrome o cuando reviso mi proyecto en mi teléfono, aparece temporalmente un cuadrado azul alrededor del botón cuando hago clic en él. Intenté configurar o outline: none, y evitar esto, pero no hubo ningún cambio visible . Revisé el estilo en las herramientas de desarrollo de Chrome, pero no puedo entender de dónde viene este cuadrado azul y cómo eliminarlo o hacerlo invisible. Cualquier ayuda es bienvenida.outline: 0buttonbutton:hoverbutton:focusbutton:active

Este es mi HTML:

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

Este es mi 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;
}

Código completo en GitHub: https://github.com/Marjolein-Kasman-de-Jong/advice-generator-app

Proyecto en páginas de GitHub: https://marjolein-kasman-de-jong.github.io/advice-generator-app/