按下<button>选择器

Question

我想创建一个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;
}

<button>Button</button>

​

只有当我点击并按住它时，它才会改变。我想让它在被烫后改变一下式样。例如，正常状态为白色，单击时状态为绿色，单击释放后状态为红色。

Answer 1

您可以使用:focus，只要用户不在其他地方单击，它就会保持样式。

button:active {
    border: 2px solid green;
}

button:focus {
    border: 2px solid red;
}

Answer 2

如果按钮打开一个新页面，你可以用php来做这件事。

例如，如果按钮链接到一个名为pagename.php的页面，只要你停留在该页面上，该按钮就会一直保持红色。

我用'/‘分解了url，得到了类似如下的结果：

url = 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>

注意:我没有尝试过这段代码。它可能需要调整。