CSS按钮点击样式改变

在网页设计中，按钮是必不可少的元素之一。通过CSS，我们可以轻松地设计出漂亮的按钮。今天我们来学习如何为按钮添加点击样式。

首先，让我们为按钮设置初始样式：

/* 按钮样式 */.button {padding: 10px 20px;background-color: #ccc;border: none;color: #fff;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 10px 20px;cursor: pointer;}

现在，我们将添加一个名为“active”的新类，当用户点击按钮时，该类将应用于按钮并更改其样式。

/* 按钮点击样式 */.button.active {background-color: #333;box-shadow: 0px 5px 0px #000;transform: translateY(4px);}

我们需要使用JavaScript逻辑为按钮添加点击事件，并在点击时为其添加“active”类。以下是一个使用原生JavaScript的示例：

var buttons = document.querySelectorAll('.button');for (var i = 0; i < buttons.length; i++) {buttons[i].addEventListener('click', function() {// 删除所有按钮的“active”类for (var j = 0; j < buttons.length; j++) {buttons[j].classList.remove('active');}// 将“active”类应用于当前点击的按钮this.classList.add('active');});}

现在，每次单击按钮时，它将获得新的样式。

总之，通过CSS和JavaScript，我们可以为按钮添加动态点击样式，以增强用户交互体验。当用户点击按钮时，它将更具可视化效果，从而增强页面的专业度和互动性。