[分享]css3按钮开关

CSS3按钮开关可以为网页带来更加现代化的交互效果。通过CSS3技术的使用，我们可以制作出漂亮、简洁的按钮开关，并且也可以自定义颜色、大小、形状等样式属性。本文将介绍如何使用CSS3样式来创建按钮开关...

CSS3按钮开关可以为网页带来更加现代化的交互效果。通过CSS3技术的使用，我们可以制作出漂亮、简洁的按钮开关，并且也可以自定义颜色、大小、形状等样式属性。本文将介绍如何使用CSS3样式来创建按钮开关。

//HTML代码
<div class="switch">
  <input type="checkbox" id="toggle"/>
  <label for="toggle"></label>
</div>

//CSS代码
.switch {
  position: relative;
  width: 60px;
  height: 34px;
}
.switch input {
  display: none;
}
.switch label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 34px;
  background-color: #ccc;
  transition: background-color .3s;
  cursor: pointer;
}
.switch label:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 2px 2px 5px rgba(0,0,0,.3);
  transition: transform .3s;
}
.switch input:checked + label {
  background-color: #61ce70;
}
.switch input:checked + label:after {
  transform: translateX(26px);
} 

上述代码中，我们使用了一个div元素和一个input元素来创建按钮开关。通过CSS代码，我们将按钮开关呈现出来，并且设定了其样式。

首先，我们通过设置元素的position属性为relative来为按钮开关创建一个相对定位的父元素。然后，我们设置了按钮的宽度和高度，并将input元素的display属性设置为none，以便于我们使用label元素来代替input元素来进行交互。

我们设置了label元素的position属性为absolute，并且将其定位到了父元素的上下左右四个方向。通过设置圆角边框和背景色，我们可以为按钮开关设置一个基本的样式。我们还使用了CSS3的transition属性来为按钮开关添加一个渐变过渡效果。

接下来，我们使用label元素的:after伪元素来为按钮开关添加一个白色的圆形开关按钮，并且设置了一些属性，比如圆角，背景色和阴影等。我们同样使用了transition属性来为开关按钮添加一个平滑的过渡动画效果。

最后，通过使用CSS选择器的:checked伪类，我们可以为按钮开关设置一个切换状态，当按钮为开启状态时，我们将对应的样式应用到了开关按钮和底部标签上面。

通过这种方式，我们可以创建一个漂亮的、响应式的按钮开关，并且可以加入更多的自定义样式来满足我们的需求。