单击时更改按钮的颜色

I have a button with a background linear-gradient in css, but I want to inverse the gradient when the button is clicked. Here's the thing, I mean click as in "depressed" like when you have the mouse over the button and have the mouse button pressed, but when you let go of the mouse button, I want it to go back to normal. When I try to search this I get a bunch of answers on permanently changing a button after its been clicked, however I only want to change the button's background color while its being clicked. How would I go about this?

我在css中有一个带有背景线性渐变的按钮，但我希望在单击按钮时反转渐变。这就是事情，我的意思是点击“郁闷”，就像当鼠标悬停在按钮上并按下鼠标按钮时，但是当你松开鼠标按钮时，我希望它恢复正常。当我尝试搜索它时，我得到一堆关于在点击后永久更改按钮的答案，但是我只想在点击它时更改按钮的背景颜色。我怎么会这样呢？

4 个解决方案

#1

You probably want to use :active pseudo class.

您可能想要使用：active伪类。

button:active {
    background: red;
}

See this example: http://jsfiddle.net/1jnb8yd6/

看到这个例子：http：//jsfiddle.net/1jnb8yd6/

#2

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

#3

Hi here is how you do it in CSS:

嗨，这里是你如何在CSS中做到这一点：

button:active{
    background-color:red;
}

here in JS:

这里是JS：

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

#4

You can use addClass and removeClass on events mousedown and mouseup.

您可以在事件mousedown和mouseup上使用addClass和removeClass。

$(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 is much cleaner, but sometimes it seems to get stuck with focus. I can't seem to reproduce that issue currently, so maybe it's something of the past...

：活跃的更干净，但有时它似乎陷入焦点。我现在似乎无法重现那个问题，所以也许它已成为过去...

#1