Agregue un filtro solo a la imagen:

 .hello { background-color: #eeeeee; color: #4171af; font-size: 20px } .hello:hover { background-color: #4171af; color: white; } .hello:hover img { filter: brightness(150%); }

 <div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div>

Le recomiendo que cree un segundo archivo de imagen y, al pasar el mouse, cambie el atributo src de la imagen usando JavaScript al archivo más brillante. También le permite ser más creativo que simplemente aumentar el valor de brillo.

Es una tarea sencilla, pero prefiero explicarla detalladamente. Parece que te has ocupado de los efectos de desplazamiento CSS básicos sin ningún problema, así que solo te mostraré el JavaScript.

Su HTML probablemente se vea así (agregué una class a la imagen y img el JavaScript):

 <div class="hello"> <img class="play" src="https://i.ibb.co/HBbfCGF/play.png"> <span>Button</span> </div> <script src="script.js"></script>

Ahora, desea cambiar el atributo src="" de la etiqueta <img> , al pasar el mouse sobre todo el <div> . Y cuando el mouse ya no se desplaza sobre el <div> , desea establecerlo en el valor predeterminado.

Deberá utilizar las funciones addEventListener() y setAttribute().

 let hello = document.querySelector('.hello'); hello.addEventListener('mouseover', function(){ let img = document.querySelector('.play'); img.setAttribute('img', 'path/to/the/second/file.png'); }); hello.addEventListener('mouseout', function(){ let img = document.querySelector('.play'); img.setAttribute('img', 'https://i.ibb.co/HBbfCGF/play.png'); });