117笔记问答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); /* 添加阴影效果 */
}
- 过渡效果： 使用CSS过渡（transitions）可以在按钮的样式之间创建平滑的动画效果。例如，可以在按钮悬停时改变背景颜色，并在鼠标离开时恢复原样。
button {
transition: background-color 0.3s ease; /* 设置过渡效果 */
}
button:hover {
background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}
- 动画效果： 使用CSS动画（animations）可以为按钮创建更复杂的动画效果。例如，可以在按钮被点击时播放一个旋转动画。
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
button:active {
animation: rotate 1s linear infinite; /* 点击时的旋转动画 */
}
这些只是一些基本的CSS3按钮交互效果示例。你可以根据需要组合使用这些效果，或者创建更复杂的效果。同时，也可以使用JavaScript来增强按钮的交互性，例如添加点击事件监听器等。