[分享]css3按钮特效效果

CSS3按钮特效可以为网页增添动感而美观的元素，让用户感觉更加友好，轻松地浏览网页内容。

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 30px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #3e8e41;
}

button:active {
  background-color: #367c39;
  transform: translateY(2px);
} 

上面的代码使用了CSS3的button:hover和button:active伪类选择器，使按钮随着鼠标的移动和点击而改变样式。

除此之外，CSS3还能加入更多的按钮特效，比如渐变色和阴影效果：

.button {
  background: linear-gradient(to bottom right, #f44336, #e91e63, 
              #9c27b0, #673ab7, #3f51b5, #2196f3, #009688, #8bc34a);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
  box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
} 

上述代码使用了CSS3的gradient渐变和box-shadow阴影效果，当鼠标悬浮在按钮上时，同时使用了transform的放大效果，让按钮更加夺人眼球。

总之，CSS3的按钮特效能够提升网站的视觉表现力，带来更好的用户体验，值得我们在网页设计中广泛运用。