CSS動畫是現代網站中常用的效果之一。按鈕動畫是其中一種常見的交互方式，可以為網站增加生命力和吸引力。本文將介紹一些常見的按鈕CSS動畫。

/* 點擊動畫 */
button {
transition: all 0.2s;
}
button:active {
transform: scale(0.9);
}
/* 懸停動畫 */
button:hover {
background-color: #f9f9f9;
box-shadow: 2px 2px 10px #ddd;
transform: translateY(-2px);
}
/* 旋轉動畫 */
.rotate-btn {
transition: all 0.2s;
}
.rotate-btn:hover {
transform: rotate(360deg);
}
/* 邊框動畫 */
.border-btn {
border: 2px solid #444;
transition: all 0.2s;
}
.border-btn:hover {
border: 2px solid #eee;
padding: 8px 16px;
}
/* 漸變動畫 */
.gradient-btn {
background-image: linear-gradient(to right, #80d3fe, #7ea5f7);
transition: all 0.2s;
}
.gradient-btn:hover {
background-image: linear-gradient(to right, #f0001d, #ff7902);
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

以上是一些常見的按鈕CSS動畫效果。通過使用這些動畫效果，可以輕松地為網站增加交互性和吸引力，提升用戶體驗。