CSS Button Transitions

Question

I'm fairly new to HTML and CSS. In my first website being created, I encountered a problem with CSS transitions. What I want to happen, is when you mouse over, the text and background color transition, and for the same to happen when you mouse off. But instead, one of the CSS transitions seems to be overriding the other. I can't get them both to transition at the same time on mouse off. Am I just missing something, or is it more complicated than just a "transition: color 0.5s"? It's got to be possible somehow.

Check out what I mean here. here: ( http://jsfiddle.net/SeanWhelan/oz0amfL7/ )

Here is the code for the button:

.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color 0.5s; }

.btn:hover {
background: #87ff00;
cursor: pointer; 
transition: background-color 0.5s;
color: #333; }

I apologise if there's a really simple way to do this, only started learning HTML and CSS a few days ago.

Answer 1

Give this a try:

.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color .5s, background-color .5s; }

.btn:hover {
background: #87ff00;
cursor: pointer; 
color: #333; }

Transition statements do overwrite one another. You can either comma separate the various properties you want to transition or you can use the all keyword to target all properties.