首先，在HTML中添加按钮的代码，使用button标签或a标签将按钮进行包裹，如下所示：
<button >按钮</button>
接着，在CSS中添加按钮样式，并给按钮添加hover效果，如下所示：
.btn{background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;transition: all 0.3s ease-in-out;}.btn:hover{box-shadow: 0px 5px 10px rgba(0,0,0,0.2);transform: translateY(2px);}在按钮样式中，transition属性设置了过渡效果，当鼠标悬停在按钮上时，box-shadow属性将添加一个阴影效果，transform属性将使按钮在Y轴方向上向下滑动2px的距离。
最后，刷新浏览器查看效果，如下图所示：
总之，通过CSS添加滑动效果可以使按钮样式更加生动，增加用户的体验感，同时也是吸引用户注意力的一种方式。
上一篇：css按钮左右半圆
下一篇：css按钮按压动效
