滑动门（Sliding doors）效果是一种常用的CSS技术，可以实现按钮、导航菜单等元素的自定义样式。下面是一个使用CSS实现滑动门效果的示例代码：
HTML：
〓〓html代码如下：〓〓
<button class="sliding-door-button">
<span>按钮文本</span>
</button>
CSS：
〓〓css代码如下：〓〓
.sliding-door-button {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
border: none;
overflow: hidden;
}
.sliding-door-button span {
position: relative;
z-index: 1;
color: #fff;
}
.sliding-door-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f00;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sliding-door-button:hover::before,
.sliding-door-button:focus::before {
transform: translateX(0);
}
在这个示例中，我们创建了一个按钮元素，并为其添加了类名 .sliding-door-button 。
通过设置 .sliding-door-button 的样式，我们将按钮设为相对定位（relative），并去除了默认的边框和背景色。我们还设置了内边距（padding）来控制按钮的尺寸。
使用 .sliding-door-button span 选择器，我们设置了按钮文本的样式，包括颜色等属性。
通过使用 .sliding-door-button::before 选择器，我们创建了一个伪元素（pseudo-element）作为滑动门的背景。我们将其定位到按钮的左上角，并设置完全遮盖按钮的宽度和高度。初始状态下，我们使用 transform: translateX(-100%) 将滑动门移到按钮的左侧。
在鼠标悬停（ hover ）或获取焦点（ focus ）时，我们使用 transform: translateX(0) 将滑动门移回到按钮的可见区域，实现滑动门效果。通过添加过渡效果（ transition ），我们平滑地过渡滑动门的位置变化。
该示例中的颜色、尺寸和过渡效果可以根据需要进行调整，以满足具体设计要求。