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 Transitions and Transforms Getting Started with CSS Transitions Transitioning Specific Properties with transition-property

Posted by Thomas Katalenas
Thomas Katalenas
11,033 Points

workspace issues

/* ================================= 
  Button Transitions
==================================== */

.button {
    color: #fff;
    background: #4a89ca;
    transition-duration: .4s;
  transition-property: all;
}

.button:hover {
    background: #d36a62;
  border-radius: 1em;
}

.button:active {
    background: #a33830;
}


/* ================================= 
  Photo Overlay Transitions
==================================== */
Thomas Katalenas
Thomas Katalenas
11,033 Points

why doesnt the web page change the radius? on several videos the web page is not doing what its supposed to, maybe a bug? once I get the buttons to turn red thats all they do, they don't get circular.

3 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Thomas,

Have you saved your changes to your CCS and reloaded the page as I have just tested your code above and its changing the color and rounding the edges for me.

See below workspace should you wish to check for yourself I have literally copied your code in though.

https://w.trhou.se/e7t7cd0y2k

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

as jcorum has mentioned with this coding this only affects the shape on buttons when you hover your mouse over them when mouse is not over it will not round edges,

To round edges all the time you will need the following 

.button {
    color: #fff;
    background: #4a89ca;
    transition-duration: .4s;
    transition-property: all;
    border-radius: 1em; //border-radius needs to be in standard .button selector and not pseudo class of hover
}

.button:hover {
    background: #d36a62;

}

.button:active {
    background: #a33830;
}
jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

You CSS matches that in the video.

But since the rule is written for .button:hover, the corners of the button won't get rounded until you hover the cursor over them, as they did when Guil tested his.

Thomas Katalenas
Thomas Katalenas
11,033 Points
Thomas Katalenas
Thomas Katalenas
11,033 Points

I forked your workspace and now it works, Thanks!