Neon 切换按钮 — CSS — 分步指南
Neon 切换按钮 — CSS — 分步指南
HTML
对于 HTML，我们需要两个元素。切换类和切换内部的圆圈。
<div class="toggle">
<div class="circle"></div>
</div>
CSS
对于 CSS，首先我们将样式切换类。我们将位置设置为相对和 40x20 像素。
我们将边框半径设置为 20 像素，将边框设置为深灰色，就像按钮关闭一样。
然后我们将光标设置为指针和转换。
.toggle {
位置：相对；
宽度：40px；
高度：20px；
边框：1px 实心 #444;
边框半径：20px；
过渡：0.2s；
光标：指针；
}
对于圆形，首先，我们将通过将宽度和高度设置为 20px 和边框半径来创建一个圆形。
现在我们将背景颜色设置为透明，位置设置为绝对，左侧，边距为 2px。
我们将添加与“切换”类相同的过渡和边框。
最后，我们将 box sizing 设置为边框框，这意味着宽度和高度包括填充和边框以及内容，这意味着圆形的实际大小是 14x14 加上每边 1 个像素的边框。
。圆圈 {
宽度：16px；
高度：16px；
边框半径：20px；
背景颜色：透明；
位置：绝对；
左：0；
边距：2px；
过渡：0.2s；
边框：1px 实心 #444;
box-sizing：边框框；
}
在悬停时，我们将“切换”边框和框阴影设置为霓虹紫色，并进行过渡，以使这种变化平滑。
.toggle:悬停{
边框颜色：rgb(217, 176, 255);
过渡：0.2s；
盒子阴影：0 0 50px rgb(217, 176, 255);
}
至于圆形，在切换悬停时，我们将其向右移动 20px 并设置过渡。
我们还将边框和框阴影设置为霓虹紫色。
在这里，我们将添加两个阴影，一个 inset 和一个 out。
.toggle:悬停 .circle {
左：20px；
过渡：0.2s；
边框颜色：rgb(217, 176, 255);
盒子阴影：0 0 30px rgb(217, 176, 255),
插图 0 0 10px rgb(217, 176, 255, 0.2);
}
就是这样。
您可以找到视频教程和完整代码 这里 .
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
