按下<button> CSS
我想创build一个button，当它被按下时改变它的样式。 这是我的CSS代码：
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; } 只有当我点击并按住它时，它才会改变。 我想让它在按下后改变风格。 例如，正常状态为白色，点击状态为绿色，点击释放后为红色。
如果您使用<a>标签而不是button，则可以执行此操作。 我知道这不是你所要求的，但如果你找不到解决scheme，它可能会给你一些其他的select：
从另一个答案的演示借用我在这里产生：
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; }
<a id="btn" href="#btn">Demo</a>
您可以使用:focus只要用户不在其他位置点击， :focus将保持不变。
button:active { border: 2px solid green; } button:focus { border: 2px solid red; }
我们应该包括一个小的JS？ 因为CSS基本上不是为这个工作创build的。 CSS只是一个样式表，可以将样式添加到HTML中，但是它的伪类可以做一些基本的CSS不能做的事情。 例如button:active主动是伪的。
参考：
http://css-tricks.com/pseudo-class-selectors/您可以在这里了解更多关于pseudo的内容！; 🙂
你的代码：
代码，你有基本但有帮助。 是的:active将只发生一次点击事件触发！
button { font-size: 18px; border: 2px solid gray; border-radius: 100px; width: 100px; height: 100px; } buttn:active { font-size: 18px; border: 2px solid red; border-radius: 100px; width: 100px; height: 100px; }
这就是CSS会做什么的，什么暗示是好的，但是他会build议需要a标签。
如何使用CSS：
您也可以使用:focus 。 :focus一旦点击完成， :focus就会工作，直到你点击其他地方，这就是CSS，你正在尝试使用CSS，所以使用:focus来改变button！
JS会做什么：
JavaScript的jQuery库将帮助我们为这个代码。 这是一个例子：
$('button').click(function () { $(this).css('border', '1px solid red'); }
这将确保button保持红色，即使点击了。 要更改焦点types（将红色更改为其他颜色），可以使用以下命令：
$('button').click(function () { $(this).css('border', '1px solid red'); // find any other button with a specific id, and change it back to white like $('button#red').css('border', '1px solid white'); }
这样，您将创build一个导航菜单。 当你点击它们时，会自动改变标签的颜色。 🙂
希望你能得到答案。 祝你好运！ 干杯。
如果button打开一个新页面，你可以用php来做到这一点。
例如，如果button链接到一个名为pagename.php的页面，那么url：www.website.com/pagename.php，只要您停留在该页面上，该button将保持红色。
我用“/”分解了url，
url [0] = pagename.php
<? $url = explode('/', substr($_SERVER['REQUEST_URI'], strpos('/',$_SERVER['REQUEST_URI'] )+1,strlen($_SERVER['REQUEST_URI']))); ?> <html> <head> <style> .btn{ background:white; } .btn:hover, .btn-on{ background:red; } </style> </head> <body> <a href="/pagename.php" class="btn <? if (url[0]='pagename.php') {echo 'btn-on';} ?>">Click Me</a> </body> </html>
注意：我没有尝试这个代码。 它可能需要调整。
