css点击按钮样式代码

今天我们来讲一讲CSS的点击按钮样式代码。 首先，我们需要在HTML中添加一个按钮元素：

这是一个按钮：

<button>点击我</button>

此时，按钮的样式还是默认的，我们需要使用CSS来美化它。 为了让按钮在被点击的时候有更明显的反馈，我们可以给它添加:hover伪类。当鼠标悬停在按钮上时，按钮的颜色会变成指定的颜色。

这是一个按钮：

<button>点击我</button>
<style>
  button:hover {
  
  background-color: #ddd;
  
  color: white;
}
</style> 

接下来，我们可以为按钮添加点击事件，使得在点击按钮时，按钮的样式发生改变。使用JavaScript来实现按钮点击事件：

这是一个按钮：

<button onclick="changeStyle()">点击我</button>
<style>
  button:hover {
  
  background-color: #ddd;
  
  color: white;
}
</style>
<script>
  function changeStyle() {
  
  var btn = document.getElementsByTagName("button")[0];
  
  if (btn.style.backgroundColor === "red") {
  
   
 btn.style.backgroundColor = "green";
  
   
 btn.style.color = "white";
  
}
 else {
  
   
 btn.style.backgroundColor = "red";
  
   
 btn.style.color = "black";
  
}
}
</script> 

在这个例子中，我们为按钮添加了一个onclick事件，调用了changeStyle()函数。函数首先获取按钮元素，然后判断按钮的背景颜色，如果背景颜色是红色，就将背景颜色修改为绿色，否则修改为红色。同时，文字颜色也做出相应的修改。 这就是CSS点击按钮样式代码的简单实现。通过添加:hover伪类和按钮点击事件，可以让按钮的样式更加美观和动态。