How to insert an image and move the text by hovering the mouse on the button?

Question

I am making a menu of categories of books and when passing the mouse on each button I would like the text to move to the left and an image to the right of the button appears.

Could someone help me?

#botao_genero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 241px;
  height: 56px;
  border: 0;
  outline: 0;
  padding-left: 8px;
  margin: 10px;
  background: #FFFFFF;
  border-radius: 15px;
  font-size: 24px;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 25%);
}

<button id="botao_genero" type="button">Aventura</button>

Answer 1

#botao_genero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 241px;
  height: 56px;
  border: 0;
  outline: 0;
  padding-left: 8px;
  margin: 10px;
  background: #FFFFFF;
  border-radius: 15px;
  font-size: 24px;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 25%);
  transition: justify-content 1s;
  cursor: pointer;
}

#botao_genero:hover {
  justify-content: space-between;
}

#botao_genero img {
  display: none;
}

#botao_genero:hover img {
  display: flex;
}

<button id="botao_genero" type="button">
  <span>Aventura</span>
  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMmM1LjUxNCAwIDEwIDQuNDg2IDEwIDEwcy00LjQ4NiAxMC0xMCAxMC0xMC00LjQ4Ni0xMC0xMCA0LjQ4Ni0xMCAxMC0xMHptMC0yYy02LjYyNyAwLTEyIDUuMzczLTEyIDEyczUuMzczIDEyIDEyIDEyIDEyLTUuMzczIDEyLTEyLTUuMzczLTEyLTEyLTEyem02IDUuOTk5bC01LjYyMSAyLjk4NmMtLjg5OS0uMTA0LTEuODA2LjE5MS0yLjQ3NC44NTktLjY2Mi42NjMtLjk1IDEuNTYxLS44NjIgMi40MjhsLTMuMDQzIDUuNzI4IDUuNzI0LTMuMDQyYy44ODQuMDg5IDEuNzcyLS4yMDUgMi40MzItLjg2NS42MzQtLjYzNC45NjktMS41MjQuODU5LTIuNDczbDIuOTg1LTUuNjIxem0tNS45NyA3LjIyYy0uNjg5IDAtMS4yNS0uNTU5LTEuMjUtMS4yNDktLjAwMS0uNjkxLjU1OS0xLjI1MSAxLjI1LTEuMjUuNjkgMCAxLjI1LjU2IDEuMjUgMS4yNS0uMDAxLjY4OS0uNTYgMS4yNDktMS4yNSAxLjI0OXptLjc5LTkuNDA5djIuMTA4aC0uNDU3bC0uMDA0LS4wMDctLjgwMS0xLjM1NXYxLjM2MmgtLjQzNnYtMi4xMDhoLjQ1NGwuODA4IDEuMzY1di0xLjM2NWguNDM2em02LjIzNSA4LjczNHYtLjQ4aC45NTd2LS4zODRoLS45NTd2LS40MTdoMS4wNDN2LS40MTNoLTEuNTA3djIuMTA4aDEuNTI5di0uNDE0aC0xLjA2NXptLTEyLjk5OC0xLjY5NGwtLjMxNSAxLjM5NS0uMzI5LTEuMzk1aC0uNDNsLS4zMzQgMS4zNzctLjMwNC0xLjM3N2gtLjQ2NWwuNTI3IDIuMDk4LjAwMy4wMTFoLjQ2M2wuMzItMS4zNzguMzI2IDEuMzc4aC40NTVsLjUzOC0yLjEwOGgtLjQ1NXptNS4xODggOS4yMDljLjExOS4wNjYuMzU4LjEzMi42MDEuMTMyLjU4MiAwIC44NTMtLjMwMi44NTMtLjY1NyAwLS4zMDItLjE3My0uNDk3LS41NDctLjYzNi0uMjc3LS4xMDYtLjM5NC0uMTY2LS4zOTQtLjMwMiAwLS4xMDYuMTAxLS4yMDQuMzA5LS4yMDQuMjA0IDAgLjM1OC4wNi40NC4xMDFsLjEwNi0uMzg0Yy0uMTI2LS4wNi0uMjk5LS4xMDctLjU0MS0uMTA3LS40OTcgMC0uODAyLjI3NC0uODAyLjYzNiAwIC4zMTIuMjMyLjUwNy41ODUuNjMyLjI1NS4wODkuMzU1LjE2Ny4zNTUuMjk2IDAgLjE0Mi0uMTE2LjIzMy0uMzM3LjIzMy0uMjA0IDAtLjQwNS0uMDY2LS41MzEtLjEzM2wtLjA5Ny4zOTN6Ii8+PC9zdmc+">
</button>

You can use :Hover to assign styles when the mouse goes over the element. Initially the image comes with display: none to stay hidden, then we change it to display: flex, and align the content at the ends with the justify-content: space-between.

The image, I used a SVG I found on the net, but is exchange for your same.