有趣的css - 好看的开关按钮

以下是一个简单的好看的开关按钮的CSS样式代码示例：

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 0;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
 
/* Hide the browser's default radio button */
.switch input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
 
/* Create a custom radio button */
.switch-label {
  position: relative;
  display: block;
  width: 60px;
  height: 34px;
  border-radius: 34px;
  background-color: #757575;
  transition: background-color 0.2s;
}
 
/* On mouse-over, add a background color */
.switch-label:hover {
  background-color: #9e9e9e;
}
 
/* Create the indicator (the dot/circle - hidden at first) */
.switch-label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  background-color: white;
  transition: left 0.2s;
}
 
/* On mouse-over, move the indicator (dot/circle) */
.switch:hover .switch-label:after {
  left: 30px;
}
 
/* When the radio button is checked, move the indicator (dot/circle) to the right by 30px */
.switch input:checked + .switch-label:after {
  left: 30px;
}
 
/* When the radio button is checked, change the background color of the slider */
.switch input:checked + .switch-label {
  background-color: #4caf50;
}
 
/* When the radio button is checked, the slider immediately jumps to the right position. */
.switch input:checked + .switch-label:after {
  left: 30px;
}
 
/* When the radio button is disabled, gray it out */
.switch input:disabled + .switch-label {
  opacity: 0.6;
  pointer-events: none;
}

HTML部分：

<label class="switch">
  <input type="radio" id="on" name="switch" checked>
  <span class="switch-label"></span>
</label>

这段代码为一个简单的开关按钮设置了样式，当鼠标悬停在按钮上时，按钮的背景色会改变，当选中（勾选）时，按钮的背景色会变为绿色，并且滑块会向右移动。同时，当按钮被禁用时，滑块会变灰并且不可点击。这个示例展示了如何使用CSS和HTML创建一个用户友好、易于操作的界面元素。