在网页设计中，有时需要用到滑动按钮，而 CSS3 的 transform 和 transition 属性可以很方便地实现这个效果。

首先，我们可以先定义一个 HTML 结构，其中包括一个 label 标签、一个 input 标签和一个 span 标签：

<label for="slide">
<input type="checkbox" id="slide">
<span class="slider"></span>
</label>

接着，在 CSS 样式中定义 label、input 和 span 的样式，其中需要用到 position、height、width、background、border-radius、transition 和 transform 等属性：

label {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
input[type="checkbox"] {
display: none;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: #ccc;
transition: .4s;
}
.slider::before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
border-radius: 50%;
background-color: white;
transition: .4s;
transform: translateX(0);
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider::before {
transform: translateX(26px);
}

在这段代码中，我们使用了伪元素 ::before 来定义按钮上的小圆圈，并用 translateX 属性来实现圆圈在按钮上的滑动效果。其中需要注意的是，translateX(0) 表示圆圈向左移动的距离为 0，translateX(26px) 表示圆圈向右移动的距离为 26px。我们还使用了 transition 属性来控制滑动的速度。

以上就是使用 CSS3 实现滑动按钮的主要代码，通过这个例子可以看出，利用 CSS3 的属性可以轻松实现简单的动画效果，让网页变得更加生动和有趣。