[分享]css3推出按钮效果

CSS3推出了很多新的按钮效果，让网页更加生动有趣，以下是几个常用的按钮效果。

/* 实心按钮 */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #337ab7;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

/* 边框按钮 */
.button-border {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #337ab7;
  color: #337ab7;
  border-radius: 5px;
  text-decoration: none;
}

/* 阴影按钮 */
.button-shadow {
  display: inline-block;
  padding: 10px 20px;
  background-color: #337ab7;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 渐变按钮 */
.button-gradient {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(to bottom, #337ab7, #1e5799);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
} 

这些按钮效果可以应用在网页的各个位置，给用户更好的交互体验。