CSS3Buttons: 使用纯CSS创建美观的按钮样式

/* 定义基础按钮样式 */
.button {
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  background-color: #4285F4;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
 
/* 鼠标悬停时改变背景颜色 */
.button:hover {
  background-color: #357AE8;
}
 
/* 定义一个小按钮，并覆盖基础按钮的样式 */
.button-small {
  padding: 5px 10px;
  background-color: #5cb85c;
  transition: background-color 0.2s;
}
 
/* 鼠标悬停时改变小按钮的背景颜色 */
.button-small:hover {
  background-color: #449D43;
}
 
/* 定义一个具有错误提示色彩的按钮 */
.button-danger {
  background-color: #F44336;
}
 
/* 鼠标悬停时改变错误按钮的背景颜色 */
.button-danger:hover {
  background-color: #D32F2F;
}
 
/* 应用到HTML元素 */
<a href="#" class="button">默认按钮</a>
<a href="#" class="button button-small">小按钮</a>
<a href="#" class="button button-danger">危险按钮</a>

这个代码实例展示了如何使用CSS创建不同样式的按钮。.button 类定义了基本的按钮样式，.button-small 类定义了一个较小的按钮，并覆盖了基本样式，.button-danger 类用于创建一个具有警告色彩的按钮。通过CSS的类继承和组合特性，可以轻松创建不同的按钮风格。