我想用html css js 实现一个星星按钮 ,点击之后变化颜色
时间: 2023-09-07 13:12:47 浏览: 131
使用Javascript + html + css实现点击页面出现小星星的动画效果
好的,你可以按照以下步骤实现:
1. 在 HTML 文件中添加一个按钮元素,并给它一个 ID,例如:`<button id="star-btn">Star</button>`
2. 在 CSS 文件中定义按钮的样式,例如:
```
#star-btn {
background-color: #fff;
border: 2px solid #e3e3e3;
color: #333;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
```
3. 使用 JavaScript 监听按钮的点击事件,并在点击时改变按钮的样式,例如:
```
const starBtn = document.getElementById('star-btn');
starBtn.addEventListener('click', function() {
starBtn.style.backgroundColor = '#f7d72c';
starBtn.style.borderColor = '#f7d72c';
starBtn.style.color = '#fff';
});
```
这段代码会在按钮被点击时将按钮的背景颜色、边框颜色和文字颜色改为黄色。
你可以根据自己的需要修改样式和颜色。
阅读全文