изменение цвета кнопки при нажатии

Question

У меня есть кнопка с линейным градиентом фона в css, но я хочу инвертировать градиент при нажатии кнопки. Вот что я имею в виду: нажмите «как нажатие», например, когда вы нажимаете кнопку мыши и нажимаете кнопку мыши, но когда вы отпускаете кнопку мыши, я хочу, чтобы она вернулась к нормальной жизни. Когда я пытаюсь выполнить поиск, я получаю кучу ответов на постоянное изменение кнопки после ее нажатия, однако я хочу только изменить цвет фона кнопки , а - щелчок. Как я могу это сделать?

Answer 1

Возможно, вы захотите использовать: активный псевдокласс.

button:active { 
    background: red; 
} 

Смотрите этот пример: http://jsfiddle.net/1jnb8yd6/

Answer 2

button:active { 
    // Background color code for inverse gradient 
} 

Answer 3

Привет вот как вы это делаете в CSS:

button:active{ 
    background-color:red; 
} 

здесь в JS:

<button type="button" 
    onmousedown="this.style.backgroundColor='red'" 
    onmouseup="this.style.backgroundColor=''" 
>CLICK ME</button> 

Answer 4

Вы можете использовать addClass и removeClass о событиях mousedown и mouseup.

$(function() { 
 
    $('button').on('mousedown', function() { 
 
     $(this).addClass('down'); 
 
    }); 
 
    $('button').on('mouseup', function() { 
 
     $(this).removeClass('down'); 
 
    }); 
 
});

button { 
 
    background: -webkit-linear-gradient(red, orange); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(red, orange); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(red, orange); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(red, orange); /* Standard syntax */ 
 
} 
 
button.down { 
 
    background: -webkit-linear-gradient(orange, red); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(orange, red); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(orange, red); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(orange, red); /* Standard syntax */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button>Gradient Reverse on Click</button>

:active намного чище, но иногда кажется, застревают с фокусом. Я не могу воспроизвести этот вопрос в настоящее время, поэтому, возможно, это что-то в прошлом ...