Probleme pour bouton menu (HTML)

Bonjours voila mon problème

Sur mon site internet j'ai crée des boutons et ce que je veux c'est que en cliquand sur le bouton il devienne fond bleu et ecriture blanche (par default il est fond blanc ecriture bleu)

voici les code que vous voyer un peu commencet c'est fait
Pour la page HTML:

<li class="menu"> <a href="onglet site/Présentation des personnages.html" rel="nofollow noopener noreferrer" target="_blank" class="bouton"> Les Heros </a> </li>

Pour la page CSS:

.menu
{
  font-size: 33px;
  background-color: white;
  color: rgb(0,165,226);
  border: 3px rgb(0,165,226) solid;
  border-radius: 10px;
  text-align: center;
  list-style-type: none;
  width: 450px;
  margin-top: -6px;
  background-color: transparent;
}

.menu:hover
{
  background-color: rgb(0,165,226);
}

.bouton:visited
{
  color: rgb(0,165,226)
}

.bouton:hover
{
  color: white
}

EDIT : Ajout des balises de code

mon problème est que quand je passe la souris sur le bloc qui contient l'url elle devient toute bleu mais pas l'ecriture (elle le devient que si je passe la souris sur elle) et moi je veux que le text devienne blanc lorsque je passe la souris sur le bloc


voila merci a ceux qui m'aideront :)

par la même occasion si vous savez faire disparaitre le surlignement en dessous du lien :)