user1338894 user1338894 - 1 year ago 42
CSS Question

Make animation fade out using transition-duration

I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.

I have tried many ways, which have not worked.

Is there another Psuedo-element which I could use? Any help would be really appreciated.

#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;

Answer Source

Here's the CSS I'm using and I've tested it against the latest browsers.

.team-member {
    padding: 15px; 
    background: #fafafa; 
    min-height: 150px; 
    width: 100%; 
    transition: linear background .5s; 
    border-radius: 3px; 
    overflow: auto; 

.team-member:hover { 
    background: #eee; 
    transition: linear background .5s;  

Also, you should also add vendor specific css prefix. For ex)

-moz-transition: linear background .5s; 
-o-transition: linear background .5s; 
-webkit-transition: linear background .5s; 
transition: linear background .5s;