Faced a problem, there is a button with a picture of svg, when you hover over the button you need to change the style of the button and the color of this image. If the first does not cause difficulties, then with the second problem. I know that you can change the color of the svg image through fill , but something does not work, maybe I do not fully understand how to use it. Even as an option I see, just replace the image with the same one, just of a different color, but I don’t fully understand how.

  .imga{ color: rgb(35, 112, 142); } .imga:hover{ border-radius: 10px; color: red; font-size: 14px; } 
  <button class="imga"> <img src="https://www.shareicon.net/data/128x128/2016/07/10/119178_chat_512x512.png" alt="Чат" style="width: 15px;height: 15px;vertical-align: middle"> Кнопка с рисунком </button>

  • Isn't it easier to use <input type="image" src="путь до картинки"> ? And then change by :hover . - And
  • @And is not exactly what you need. As you suggest, the picture is on the whole button, but I need to keep my size as in the picture, and only change the color (and it was inside the button, next to the text). about as in the code that is in question. Only there the picture does not change color. - Fess Laeda

1 answer 1

Usually for this use css background . If you add svg through the img tag, then you can not affect the styles. Make two pictures (or sprite), this will be enough. There are options for using keyframes, svg, animation, javascript animations, but this is redundant. Sample animation SVG-icons .

 .imga { color: rgb(35, 112, 142); height: 24px; width: 120px; background-size: 18px; background-repeat: no-repeat; background-position: 5px left; transition: all .2s; } .imga { background: url('https://www.shareicon.net/data/128x128/2016/07/10/119178_chat_512x512.png') 5px center no-repeat; background-size: 18px; } .imga:hover{ border-radius: 10px; color: red; font-size: 14px; background: url('https://www.shareicon.net/data/512x512/2016/01/03/697450_chat_512x512.png') 5px center no-repeat; background-size: 18px; } 
 <button class="imga"> chat me! </button>

  • Thank you very much! - Fess Laeda