Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Change background colour and hyperlink <a> colour on :hover at the same time.

Hi, everyone.

I've got a question. I am trying to style one of my CTA buttons in a way, that when a user will hover a mouse over CTA button, its background colour would change from transparent to orange + the colour of the link text should also change from orange to white.

Here's a video of what I have achieved: http://d.pr/v/1gI36 (as seen on the video, there is one major flaw in this CTA button. The colour of the button changes to orange when the user hovers over it, however, the link <a> only changes it colour when the user hovers the mouse in the middle of the button). I would like to achieve the result, when the link would change to white colour simultaneously with the orange background of CTA.

Here's my CSS:

/* NAV CTA */

#nav-cta {
  width: 9%;
  color: #E48210;
  display: inline-block;
  border: 2px solid #E48210;
  border-radius: 30px;
  font-size: 0.8em;
  font-weight: 300;
  text-align: center;
  padding: 0.7%;
  margin: 1.5% 5% 0% 0%;
  float: right;
}

#nav-cta:hover {
  background: #E48210;
  color: #FFFFFF;
  -o-transition:.4s;
  -ms-transition:.4s;
  -moz-transition:.4s;
  -webkit-transition:.4s;
  transition:.4s;
}

#nav-cta a {
  color: #E48210;
}

#nav-cta a:hover {
  color: #FFFFFF;
  -o-transition:.4s;
  -ms-transition:.4s;
  -moz-transition:.4s;
  -webkit-transition:.4s;
  transition:.4s;
}

3 Answers

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Thanks guys for the answers, but I have managed to figure it out myself... The problem was that I was trying to build CTA using <div's> instead of simply using <a> and styling it. Here's how I fixed it and achieved the desired effect:

.nav-cta {
  display: inline-block;
  float: right;
  width: 8%;
  border: 2px solid #E48210;
  border-radius: 30px;
  font-size: 0.8em;
  font-weight: 300;
  text-align: center;
  color: #E48210;
  margin: 1.5% 5% 0% 0%;
  padding: 0.7% 0.7%;
}

.nav-cta:hover {
  background: #E48210;
  color: #FFFFFF;
  -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
}

And here's a link to video: http://d.pr/v/NftA

Thanks everyone for the help, much appreciated!

Jamie Tuffen
Jamie Tuffen
8,042 Points
Jamie Tuffen
Jamie Tuffen
8,042 Points

is the a tag set inside a li tag?? This is what i do.......maybe you can find something that helps in this.... <head> <style> ul { list-style: none; } li { display: inline-block; margin: 20px; } a { display: block; border: 1px solid black; max-width: auto; color: black; padding: 20px; border-radius: 20px; text-decoration: none; font-size: 20px; } a:hover { background-color: orange; color: white; border: 1px solid orange; } </style> </head>

<body> <ul> <li> <a href="#">Welcome</a> </li> <li> <a href="#">Welcome</a> </li> <li> <a href="#">Welcome</a> </li> <li> <a href="#">Welcome</a> </li> <li> <a href="#">Welcome</a> </li> </ul>

</body>

Jamie Tuffen
Jamie Tuffen
8,042 Points
Jamie Tuffen
Jamie Tuffen
8,042 Points

excellent. looks really nice :D