css三种按钮怎么用

CSS三种按钮使用方法：

1. 普通按钮：

<button class="simple-button">按钮文字</button>

.simple-button {
  padding: 10px 20px;
  background-color: #fff;
  color: #333;
  border-radius: 5px;
  border: 1px solid #333;
  cursor: pointer;
  font-size: 16px;
}

2. 悬停按钮：

<button class="hover-button">按钮文字</button>

.hover-button {
  padding: 10px 20px;
  background-color: #fff;
  color: #333;
  border-radius: 5px;
  border: 1px solid #333;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease-in-out;
}

.hover-button:hover {
  background-color: #333;
  color: #fff;
}

3. 点击按钮：

<button class="click-button">按钮文字</button>

.click-button {
  padding: 10px 20px;
  background-color: #fff;
  color: #333;
  border-radius: 5px;
  border: 1px solid #333;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease-in-out;
}

.click-button:active {
  background-color: #333;
  color: #fff;
}