CSS3按鈕交互效果可以通過多種方式實現,包括使用偽類、過渡(transitions)和動畫(animations)等。以下是一些常見的CSS3按鈕交互效果示例:
:hover
偽類可以改變按鈕在懸停時的樣式。例如,可以改變按鈕的背景顏色、文字顏色或邊框顏色等。button:hover {
background-color: #f0f0f0; /* 改變背景顏色 */
color: #333; /* 改變文字顏色 */
border-color: #ccc; /* 改變邊框顏色 */
}
:active
偽類可以改變按鈕在被點擊時的樣式。例如,可以改變按鈕的背景顏色或陰影效果等。button:active {
background-color: #e0e0e0; /* 改變背景顏色 */
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* 添加陰影效果 */
}
button {
transition: background-color 0.3s ease; /* 設置過渡效果 */
}
button:hover {
background-color: #f0f0f0; /* 鼠標懸停時的背景顏色 */
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
button:active {
animation: rotate 1s linear infinite; /* 點擊時的旋轉動畫 */
}
這些只是一些基本的CSS3按鈕交互效果示例。你可以根據需要組合使用這些效果,或者創建更復雜的效果。同時,也可以使用JavaScript來增強按鈕的交互性,例如添加點擊事件監聽器等。