要生成一个滑动按钮,你可以使用HTML和CSS来实现。下面是一个简单的例子:
HTML代码:
<label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>
CSS代码:
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
这个例子中的滑动按钮默认是灰色的。当按钮被选中时,背景颜色会变为蓝色,并且按钮上的小圆点会向右移动。
你可以根据需要修改CSS代码来调整按钮的样式。