CSS Button Hover - Change White Text

Problem: When you hover over the box the box turns orange but the link text does not. What changes do I need to make to the CSS styles below for the link text to change to orange when you hover over the button box.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.btn-orange a{
    color:#ffffff !important;
    text-decoration: none;
  }
  
 .btn-orange a:hover{
    color:#f2a152 !important;
  }
  .btn-orange a:visited{
    color:#ffffff;
    }
    
.btn-orange{
font-family: Roboto, sans-serif;
font-weight: 0;
font-size: 16px;
color: #ffffff !important;
background-color: #f2a152;
padding: 15px 35px;
border: solid #f2a152 1px;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
border-radius: 1px;
transform: translateY(0);
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
}

.btn-orange:hover{
background-color: #fff;
color: #f2a152 !important;
border: solid 1px #f2a152;
}

<!-- language: lang-html -->

<button class="btn-orange"><a href="https://www.orcad.com/contact-us?utm_source=uberflip&utm_medium=cta&utm_campaign=contact">Contact Us</a></button>

<!-- end snippet -->

You can try changing your code from

.btn-orange a:hover{
    color:#f2a152;
  }

to

.btn-orange:hover a{
    color:#f2a152;
  }

You can't wrap an anchor with a button. You can use one or the either.

I changed your CSS and HTML accordingly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.btn-orange:visited {
  color: #ffffff;
}

.btn-orange {
  font-family: Roboto, sans-serif;
  font-weight: 0;
  font-size: 16px;
  color: #ffffff !important;
  background-color: #f2a152;
  padding: 15px 35px;
  border: solid #f2a152 1px;
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  border-radius: 1px;
  transform: translateY(0);
  cursor: pointer;
  
  color: #ffffff !important;
  text-decoration: none;
  display:inline-block
}

.btn-orange:hover {
  background-color: #fff;
  color: #f2a152 !important;
  border: solid 1px #f2a152;
}

<!-- language: lang-html -->

<a class="btn-orange" href="https://www.orcad.com/contact-us?utm_source=uberflip&utm_medium=cta&utm_campaign=contact">Contact Us</a>

<!-- end snippet -->

Change this

.btn-orange a:hover{
    color:#f2a152;
  }

to this

  .btn-orange:hover a{
    color:#f2a152;
  }