CSS 滑动门是一种常用的网页设计技术，可以让按钮或链接看起来更美观。下面介绍两种实现方法。

第一种方法是利用 CSS 的背景图片实现。具体步骤如下：

/* HTML 代码 */<button ><span>按钮文字</span></button>/* CSS 代码 */.slide-button {position: relative;border: none;padding: 0;background: transparent;cursor: pointer;}.slide-button span {display: inline-block;padding: 10px 20px;background-image: url(按钮背景图片链接);background-repeat: no-repeat;}.slide-button:hover span {background-position: -20px 0;}.slide-button:focus span {outline: none;background-position: -40px 0;}

第二种方法是利用 CSS3 的渐变特性实现。具体步骤如下：

/* HTML 代码 */<button ><span>按钮文字</span></button>/* CSS 代码 */.slide-button {position: relative;border: none;padding: 0;background: transparent;cursor: pointer;}.slide-button span {display: inline-block;padding: 10px 20px;background: linear-gradient(to right, 颜色1, 颜色2);background-size: 200% 100%;transition: background-position 0.4s ease;}.slide-button:hover span {background-position: right;}.slide-button:focus span {outline: none;background-position: right;}