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
Terrance Corley
11,990 PointsCan you help me with the ease-in-out transition on the button element?
Here is my website(Currently building the mobile version). Here is the repository for the site.
I'm having issues with getting the border-color on my button elements to ease-out when hovering off the button element. The ease-in transition works just fine though.
Any Ideas?
2 Answers
Denis Yilmaz
5,382 PointsIn other words: you added the transition only to the hover state. so its only working if the button is hovered. In the moment the cursor is not on the button anymore, the transition-style is not valid anymore so the animation is canceled. As Abraham Juliot mentioned add the style to the button class itself (you can delete the transition style for the :hover-state, if you don't need a different timing for the not-hovering >> hovering animation than hovering >> not-hovering animation)
Terrance Corley
11,990 PointsThanks to both of you guys! I appreciate you guys taking the time to help me out.
Abraham Juliot
47,353 PointsAbraham Juliot
47,353 PointsKeep the transition on the hover, but add a transition to the button element itself instead of the .teal class. If its the same transition timing (.2s) and timing funciton (ease-in-out), you can remove it from the hover state as well as .teal, and just add this transtion to the button itself.