ROZWIĄZANE Zmiana koloru przycisku

Na kolejnym etapie zamówienia mamy w koszyku trzy przyciski: "zarejestruj się", "złóż zamówienie" i "zaloguj się". Po najechaniu myszką na jeden z tych przycisków zmieniają one kolor z czarnego na szary.
Chciałbym zmienić kolor tylko pierwszego przycisku np. na fioletowy, turkusowy lub niebieski.
Jak to zrobić tak żeby nowy kolor zmieniał się na o wiele jaśniejszy tak jak w oryginale z czarnego na szary?
Wpisałem:

button.btn.btn-red.important.register {
background-color: #902d2d;
border: 1px solid #902d2d;
}​

i co dalej?
Będę wdzięczny za pomoc.

 

Hej @Trzy Marchewki! Dodaj :hover po register To spowoduje działanie CSS w przypadku najechania kursora na wybrany element czyli:

Code:

button.btn.btn-red.important.register:hover {
    background-color: #902d2d;
    border: 1px solid #902d2d;
}

Powinno działać bo sprawdzałem

 

Zmienia się z czarnego w kolor. Wolałbym odwrotnie.
W sumie jest taki przycisk o krok wcześniej w koszyku i nazywa się "zamawiam". Próbuję coś grzebać ze stylem tego przycisku ale nie wychodzi mi.

 

No to na chłopski rozum dodaj te dwa kody do CSS i dostosuj sobie kolory jakie chcesz.

 

Tak jak @michalhockey napisał powinno działać. Podaje ci gotowca (po najechaniu czarny przed czerwony)

Code:

.btn.btn-red.important.register:hover {

    background: black;

}
.btn.btn-red.important.register {

    background: red;

}

 

@michalhockey dzięki za inspirację.
@LukaszC serdeczne dzięki za kompleksowe rozwiązanie.
Wstawiłem swoje kolory i trzeba było jeszcze dodać kolory ramki przycisku dla obu kolorów.
Publikuję finalny kod dla innych, którzy ewentualnie będą potrzebować.

Code:

.btn.btn-red.important.register:hover {
    background: #b1b1b1;
    border-color: #b1b1b1;
}
.btn.btn-red.important.register {
    background: #f27022;
    border-color: #f27022;
}