html - 单击按钮时文本更改问题（仅使用 CSS）

问题描述

单击按钮时，我正在尝试change text将按钮“单击”改为“单击”。此外，当单击按钮时，其background color整个按钮和按钮文本应变为绿色并border color变为红色。

我试图解决这个问题，但我无法做到。

body{
  background-color:#7a86cb;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.button-btn #btn1 ,#btn2, #btn3{
   width:120px;
  height:45px;
  border-radius:30px;
  background-color:rgba(0, 0, 0, 0.1);
  border:2px solid black;
  color:white;
 }

#btn1{
 }

#btn2{
 margin-left:15px;
}

#btn3{
 margin-left:15px;
}

.button-btn #btn1:hover,#btn2:hover,#btn3:hover{
   background-color:#7a86cb;
 }


.btn1:active,.btn2:active,.btn3:active {
  background-color: red;
  transform: translateY(4px);
}

.btn1:after{
  content:"Clicked!";
  background-color:green;
  border:red;
}

<body>
<div class="center">
  <div class="button-btn">
<button href="#" id="btn1" class="btn1">Click</button>
<button href="#" id="btn2" class="btn2">Click</button>
<button href="#" id="btn3" class="btn3">Click</button>
    </div>
 </div>
  </body>

标签： htmlcss

要更改单击时按钮的颜色，您可以使用 JavaScript，如下所示：

$( document ).ready(function() {
  $( ".js-click" ).click(function() {
    $( ".js-click" ).css('background', 'green');
  });
});

你的 CSS 可能会这样：

button {
  background: none;
}

和你的html代码：

<button class="js-click">Click me!</button>

html - 单击按钮时文本更改问题（仅使用 CSS）

问题描述

解决方案

推荐阅读