Question 187250 in CSS Question posted in
Some basic documentation can be found here.

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.

.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;
}
<button class="btn-orange"><a href="https://www.orcad.com/contact-us?utm_source=uberflip&amp;utm_medium=cta&amp;utm_campaign=contact">Contact Us</a></button>
Tags:

3

Answers


  1. 0

    You can try changing your code from

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

    to

    .btn-orange:hover a{
    color:#f2a152;
  }
    Login or Signup to reply.
  2. 0

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

    I changed your CSS and HTML accordingly.

    .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;
}
    <a class="btn-orange" href="https://www.orcad.com/contact-us?utm_source=uberflip&amp;utm_medium=cta&amp;utm_campaign=contact">Contact Us</a>
    Login or Signup to reply.
  3. 0

    Change this

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

    to this

      .btn-orange:hover a{
    color:#f2a152;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search