Css

Question

您好，我在使用 css 时遇到了问题。当我为按钮设置样式时这是代码

.green-button{
border: none;
background-color: rgba(78, 200, 129, 0.911);
border-radius: 3px; 
color: white;}


.green-button:hover{
background-color: rgb(228, 228, 228);
border-radius: 3px; 
color: rgba(83, 211, 104, 0.911);
opacity: 7;
transition: all 0.4s;}

问题是当我点击按钮时它只是保持不变。按钮不会变成深绿色或浅绿色。

我一直在其他网站上四处寻找，但我没有当我访问常规站点时发现任何详细信息，我通常会检查以获取我的信息。如果您知道我可以尝试的任何事情，请告诉我。

Answer 1

只需使用:active伪类，代表一个正在被用户激活的元素（比如按钮）。使用鼠标时，“激活”通常在用户按下鼠标主键时开始。来自 Mdn

.green-button{
border: none;
background-color: rgba(78, 200, 129, 0.911);
border-radius: 3px; 
color: white;}


.green-button:hover{
background-color: rgb(228, 228, 228);
border-radius: 3px; 
color: rgba(83, 211, 104, 0.911);
opacity: 7;
transition: all 0.4s;}

.green-button:active{
background-color:red;
color:white}

<button class="green-button">Test</button>

Css - 如何让我的按钮在点击时产生点击效果

Css - How to have my button make a clicking effect when I click It

button

styling