Переходы с CSS Button

Question

Я довольно новичок в HTML и CSS. На моем первом созданном веб-сайте я столкнулся с проблемой переходов CSS. Я хочу, чтобы это произошло, когда вы наводите указатель мыши на текст и цвет фона, а также на то же самое, когда вы выключаете мышь. Но вместо этого один из переходов CSS, по-видимому, переопределяет другой. Я не могу заставить их обоих переходить в одно и то же время на мышь. Я просто что-то пропустил, или это сложнее, чем просто «переход: цвет 0,5 с»? Это должно быть возможно как-то.

Ознакомьтесь с тем, что я имею в виду здесь. здесь: (http://jsfiddle.net/SeanWhelan/oz0amfL7/)

Вот код для кнопки:

.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; } 

Я извиняюсь, если есть очень простой способ сделать это, только начал изучать HTML и CSS несколько дней назад.

Answer 1

Дайте этому попытку:

.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; } 

заявления Переходные сделать перезапись друг друга. Вы можете либо запятой отделить различные свойства, которые хотите переместить, либо использовать ключевое слово all для охвата всех свойств.