При наведение на кнопку цвет значка и текста должны поменяться, но я не понимаю, как сделать так, чтоб значек поменял цвет

Question

Вот собственно код

button {
  background-color: #720019;
  position: relative;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 1.25em 2em;
  font-size: 0.75em;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  -webkit-transition: background 0.25s cubic-bezier(0.55, 0, 0.1, 1);
  transition: background 0.25s cubic-bezier(0.55, 0, 0.1, 1);
  top: 50px;
  left: 50px;
}

button:hover {
  background-color: #ffffff;
  color: #720019;
}

button:focus {
  outline: none;
}

img {
  width: 30px;
  position: relative;
  left: -6px;
}

span {
  position: relative;
  top: -8px;
}

<button>
  <img src="img/whatsapp.png" alt="">
  <span>Написать нам</span>  
</button>

Answer 1

Img не могут быть изменены с помощью css свойств, за исключением свойства filter. Для таких иконок я бы посоветовал использовать Font Awesome.

button {
  background-color: #720019;
  position: relative;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.5em 1em;
  font-size: 0.75em;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  -webkit-transition: background 0.25s cubic-bezier(0.55, 0, 0.1, 1);
  transition: background 0.25s cubic-bezier(0.55, 0, 0.1, 1);
  top: 50px;
  left: 50px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

button:hover {
  background-color: #ffffff;
  color: #720019;
}

button:focus {
  outline: none;
}

button i.fa{
  font-size: 2em;
  margin: 4px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<button>
  <i class="fa fa-whatsapp" aria-hidden="true"></i>
  <span>Написать нам</span>  
</button>

БЛОГ НА HUSL

При наведение на кнопку цвет значка и текста должны поменяться, но я не понимаю, как сделать так, чтоб значек поменял цвет

Ответы (1 шт):