Как изменить цвет текста и SVG одновременно?

Question

Как изменить цвет значка звезды SVG и текста одновременно? Он меняет цвет при наведении курсора на отдельный раздел. Я не знаю, как нацелиться на обоих.

Я попытался добавить свойство цвета и цвета заливки внутри тега кнопки, но, похоже, это не сработало.

Кодовая ссылка: https://codepen.io/Zunaid/pen/RmqeNE?editors=1100

Раздел HTML:

 <button class="btn"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99993 15L5.10172 17.5751L6.0372 12.1209L2.07446 8.25819L7.55083 7.46243L9.99993 2.5L12.449 7.46243L17.9254 8.25819L13.9627 12.1209L14.8981 17.5751L9.99993 15Z" fill="#576B51"/>
</svg> </span>
  <span class="text">Button</span>
</button>

Css:

    *{
  padding: 0px;
  margin:0px;
}
.btn {
background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F0 100%);
border: 1px solid #E4F0E1;
border-radius: 4px;
margin: 100px;
display: flex;
align-items: center;
height: 32px;
 cursor: pointer;

}
.icon {
  padding: 0px 8px 0px 8px;
}
.text {
   padding-right: 8px;
}
button:hover {
  color: blue;

}

button path:hover {
   fill: blue; 

}

Я хочу изменить начало svg и цвет текста, чтобы он менялся при наведении курсора на кнопку.

Answer 1

Вы можете использовать более просто button:hover path, button:hover

*{
  padding: 0px;
  margin:0px;
}

.btn {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F0 100%);
  border: 1px solid #E4F0E1;
  border-radius: 4px;
  margin: 100px;
  display: flex;
  align-items: center;
  height: 32px;
 cursor: pointer;
}

.icon {
  padding: 0px 8px 0px 8px;
}

.text {
  padding-right: 8px;
}

/* I added */
button:hover path, button:hover {
  fill: blue; 
  color:blue;
}

<button class="btn"><span class="icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99993 15L5.10172 17.5751L6.0372 12.1209L2.07446 8.25819L7.55083 7.46243L9.99993 2.5L12.449 7.46243L17.9254 8.25819L13.9627 12.1209L14.8981 17.5751L9.99993 15Z" fill="#576B51"/>
</svg> </span>
  <span class="text">Button</span>
</button>