When testing my project on different screen sizes in Chrome dev tools or on my phone, I noticed a blue square briefly appearing around the button when it is clicked. I attempted to remove this by setting outline: none or outline: 0 on various pseudo-classes like button, button:hover, button:focus, and button:active, but the issue persisted. I inspected the styling using Chrome dev tools, but couldn't identify the source of the blue square or how to eliminate it. Any advice on this matter would be greatly appreciated.
This is the HTML code for the button:
<button>
<span class="dice-wrapper">
<img src="./src/assets/icon-dice.svg" alt="Dice icon">
</span>
</button>
Here is the CSS styling applied to the button:
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;
}
You can find the full code on GitHub: https://github.com/Marjolein-Kasman-de-Jong/advice-generator-app
The project is hosted on GitHub Pages as well: