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 CSS - Beyond the Basics Understanding CSS Transitions and Transforms Transitions Challenge

Fat Dog
Fat Dog
18,848 Points
Posted by Fat Dog
Fat Dog
18,848 Points

I already write the transition CSS rules...

These rules are added to .button class both on and off states.

transition-property: background; transition-duration: .4s;

I don't know what's still wrong with this code?

style.css 
/* Complete the challenge by writing CSS below */

.button {  
  background: #4682B4;
  transition-property: background;
  transition-duration: .4s;
}

.button:hover {
    background: #356690;
  transition-property: background;
  transition-duration: .4s;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a class="button" href="#">Learn More</a>
</body>
</html>

2 Answers

Iagor Moraes
Iagor Moraes
18,678 Points
Iagor Moraes
Iagor Moraes
18,678 Points

In this line you forgot to put a root of your css file: |link rel="stylesheet" href="page.css"|

put like this: link |rel="stylesheet" href="css/page.css"|

and you are not using the page.css file, just remove.

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Besides that, you don't need to declare the transition rules on the hover:

.button {  
  background: #4682B4;
  transition-property: background;
  transition-duration: .4s;
}

.button:hover {
    background: #356690;  
}