写一个按钮,这个按钮是白色被点击之后变成粉色,再次点击变回白色
时间: 2024-05-07 09:15:30 浏览: 53
HTML代码:
```html
<button id="myButton" class="white"></button>
```
CSS代码:
```css
button {
width: 100px;
height: 50px;
border: none;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.white {
background-color: white;
}
.pink {
background-color: pink;
}
```
JavaScript代码:
```javascript
var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
if (myButton.classList.contains("white")) {
myButton.classList.remove("white");
myButton.classList.add("pink");
} else {
myButton.classList.remove("pink");
myButton.classList.add("white");
}
});
```