Как сделать кнопку, чтобы изменить цвет фона при нажатии?

Question

Я использую AngularJS, и мне интересно, есть ли какие-либо функции, которые могут мне помочь. У меня есть кнопка следующий CSS:

button { 
     background-color: @button-background-color; 
     border: 1px solid @button-border; 
     background-color: #ccc; 
     border: 1px solid #999; 
     color: @button-color; 
     background: #e6e6e6; 
     background-image: -moz-linear-gradient(top,#fff,#d9d9d9); 
     background-image: -webkit-linear-gradient(top,#fff,#d9d9d9); 
     background-image: -o-linear-gradient(top,#fff,#d9d9d9); 
     background-image: -ms-linear-gradient(top,#fff,#d9d9d9); 
     background-image: linear-gradient(top,#fff,#d9d9d9); 
     border: 1px solid #ccc; 
     border-top-color: #ccc; 
     border-bottom-color: #a2a2a2; 
     border-radius: 4px; 
     text-shadow: 0 1px 0 rgba(255,255,255,1); 
     box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2); 
     -moz-appearance: none; 
     -webkit-appearance: none; 
     appearance: none; 
     display: inline-block; 
     line-height: 18px; 
     line-height: 1.8rem; 
     font-size: 14px; 
     font-size: 1.4rem; 
     cursor: pointer; 
     color: #474747; 
     padding: 4px 10px 3px 10px; 
     font-family: arial,sans-serif; 
     vertical-align: middle; 
    } 

Это выглядит хорошо, но я хотел бы иметь эффект, который появляется, когда я наведите курсор мыши и нажать на кнопку, не отпуская пока щелчок.

Есть ли способ, которым я могу поймать это с угловым и изменить класс на период, когда я удерживаю кнопку?

Обратите внимание, что я ищу только CSS или решение CSS/AngularJS. Я не использую jQuery.

Благодаря

Answer 1

http://www.w3schools.com/cssref/sel_hover.asp

http://www.w3schools.com/cssref/sel_active.asp

button:hover button:active 

button { 
 
     background-color: @button-background-color; 
 
     border: 1px solid @button-border; 
 
     background-color: #ccc; 
 
     border: 1px solid #999; 
 
     color: @button-color; 
 
     background: #e6e6e6; 
 
     background-image: -moz-linear-gradient(top,#fff,#d9d9d9); 
 
     background-image: -webkit-linear-gradient(top,#fff,#d9d9d9); 
 
     background-image: -o-linear-gradient(top,#fff,#d9d9d9); 
 
     background-image: -ms-linear-gradient(top,#fff,#d9d9d9); 
 
    background-image: linear-gradient(top,#fff,#d9d9d9); 
 
     border: 1px solid #ccc; 
 
     border-top-color: #ccc; 
 
     border-bottom-color: #a2a2a2; 
 
     border-radius: 4px; 
 
     text-shadow: 0 1px 0 rgba(255,255,255,1); 
 
     box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2); 
 
     -moz-appearance: none; 
 
     -webkit-appearance: none; 
 
     appearance: none; 
 
    display: inline-block; 
 
     line-height: 18px; 
 
     line-height: 1.8rem; 
 
     font-size: 14px; 
 
     font-size: 1.4rem; 
 
     cursor: pointer; 
 
     color: #474747; 
 
     padding: 4px 10px 3px 10px; 
 
    font-family: arial,sans-serif; 
 
     vertical-align: middle; 
 
    } 
 
button:hover 
 
{ 
 
    background: red; 
 
} 
 

 
button:active 
 
{ 
 
    background: green; 
 
}

<button>button</button>

Answer 2

вы можете поместить следующий CSS:

button:active{ 
    background-color: red; 
} 

для получения дополнительной информации: http://www.w3schools.com/cssref/sel_active.asp