button纯css动画 |css 0000ff什么颜色

.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
transition: all 0.5s ease;
}
.btn:hover {
background-color: #008cba;
transform: scale(1.1);
}
.btn:active {
background-color: #005b9f;
transform: scale(0.9);
}

上述代码中定义了三种Button状态：默认状态、鼠标悬停状态和鼠标按下状态。其中，所有状态都具有过渡效果，可以使Button的状态转换更加平滑。在鼠标悬停状态下，Button的背景颜色和大小都会改变，以增加用户交互体验。而当鼠标按下时，Button还会有一个缩小动画，以便更好的反馈用户的点击操作。

除了上述动画之外，还可以使用其他的CSS属性来实现更多效果，例如：
1. 增加阴影：box-shadow
2. 旋转动画：transform: rotate()
3. 边框动画：border-radius、border-color等属性

总之，使用CSS动画可以使Button更加生动、活泼。希望本篇文章对你有所帮助。