How to change the color of text and svg at the same time?

Question

How do i change the color of the SVG star icon and text at the same time? It changes color when i hover over individual section. I don't know how to target both.

I tried adding the fill color and color property inside button tag but it didn't seem to work that way.

Codepen link: https://codepen.io/Zunaid/pen/RmqeNE?editors=1100

Html section:

 <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 sction:

    *{
  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; 

}

I want to change both the svg start and text color to change when i hover over the button.

Answer 1

You can use more simply 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>