Question

我正在尝试在单击按钮时将按钮“单击”中的change text更改为“已单击”。同样，当单击按钮时，其整个按钮的background color和按钮文本应更改为绿色，而border color应更改为红色。

我已尝试解决此问题，但我无法实现。

body{
  background-color:pink;
}

.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;
 }



<button href="#" id="btn3" class="btn3">Click</button>

Answer 1

要更改单击时按钮的颜色，可以使用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>

Answer 2

做到这一点的最佳方法是使用JavaScript。添加单击按钮时的事件侦听器，然后直接编辑样式或添加类。

话虽这么说，但使用以下技巧可以实现完整的CSS解决方案：codepen

body {
	background-color: #7a86cb;
	margin: 20px;
}

#button1-clicked { display: none; }

.button {
	position: relative;
	width: 120px;
	height: 45px;
	text-align: center;
	white-space: nowrap;
	line-height: 45px;
	border-radius: 30px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.1);
	border: 2px solid black;
	color: white;
}
.button:active {
	transform: translateY(4px);
}
.button:hover {
	background: #7a86cb;
}
.button::before {
	content: 'Click';
}
.button .cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	cursor: pointer;
}

#button1-clicked:active ~ #button1 {
	transform: translateY(4px);
}
#button1-clicked:checked ~ #button1 {
	background: green;
	border-color: red;
}
#button1-clicked:checked ~ #button1::before {
	content: 'Clicked!'
}
/* Hide the label to make sure the user cannot "unclick" */
#button1-clicked:checked ~ #button1 .cover {
	display: none;
}

<input type="checkbox" id="button1-clicked">
<div class="button" id="button1" role="button">
	<label for="button1-clicked" class="cover"></label>
</div>

请避免在生产环境中使用此类内容，而应使用JavaScript事件监听器。

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

2 个答案: