按下< button> CSS [英] Pressed <button> CSS

问题描述

我想要创建按钮，以便在按下时更改其样式。这是我的CSS代码：

I'd like to create button that changes it style when it gets pressed. This is my CSS code:

button {
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

button:active {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

只有当我点击&握住它。我想让它改变风格后，它按下。例如，正常状态将是白色的，而被点击的状态将是绿色的，并且在点击之后它将是红色的。

It is changed only when I click & hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.

推荐答案

如果您使用< a> 标记而不是按钮，则可以执行此操作。我知道这不是你要求的，但它可能会给你一些其他选项，如果你找不到一个解决方案：

You can do this if you use an <a> tag instead of a button. I know it's not exactly what you asked for, but it might give you some other options if you cannot find a solution to this:

从另一个答案的演示借用我生成这个：

Borrowing from a demo from another answer here I produced this:

a {
    display: block;
    font-size: 18px;
    border: 2px solid gray;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}
a:active {
    font-size: 18px;
    border: 2px solid green;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
a:target {
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

请注意：target ;这将是通过哈希定位元素时应用的样式。这也意味着您的HTML将需要这样：< a id =btnhref =＃btn>一个链接定位本身的链接。< / a> 和演示 http://jsfiddle.net/rlemon/Awdq5/4/

Notice the use of :target; this will be the style applied when the element is targeted via the hash. Which also means your HTML will need to be this: <a id="btn" href="#btn">Demo</a> a link targeting itself. and the demo http://jsfiddle.net/rlemon/Awdq5/4/

感谢@BenjaminGruenbaum这里是一个更好的演示： http://jsfiddle.net/agzVt /

Thanks to @BenjaminGruenbaum here is a better demo: http://jsfiddle.net/agzVt/

_{此外，作为脚注：这应该真正使用JavaScript和应用/从元素中删除CSS类。这将不那么复杂。}

这篇关于按下< button> CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！