在网页设计中，按钮是非常重要的元素之一。为按钮设置移动效果可以使网页更加生动、有趣。本文将介绍如何使用CSS来设置按钮移动效果。

/* 定义按钮的样式 */.button {display: inline-block;padding: 10px 20px;background-color: #3f51b5;color: white;font-size: 16px;border-radius: 5px;}/* 设置按钮移动效果 */.button:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}/* 设置按钮点击效果 */.button:active {transform: translateY(0);box-shadow: none;}

上述CSS代码定义了按钮的样式，并为按钮设置移动效果和点击效果。在:hover伪类下，使用transform属性来设置按钮向上移动5个像素，同时使用box-shadow属性为按钮增加一个阴影效果，使按钮更加立体。

在:active伪类下，调用transform属性将按钮恢复原位，并取消阴影效果。通过设置:hover和:active伪类，可以使按钮在鼠标悬停和点击时产生动态效果，提升用户体验。