Html 创造；“环形”；CSS中的按钮

我正在使用HTML、CSS和jQuery创建一个Simon游戏。我的设计是基于

我真的很想让纽扣看起来像戒指

我尝试了一些使用相对父div和绝对子div的解决方案，但问题是，因为我使用的是引导网格系统，而且它响应速度快；当我检查网页以调整divs位置或调整屏幕比例时，一切都在移动，看起来很糟糕

使用按钮上的

box shadow:inset

创建戒指是最有希望的，但我已经在使用box shadow创建霓虹灯，这对我来说不是一个真正的选项。（如果有办法做到这两个方面，这可能是有希望的。）

.btn-circle.btn-xl{
宽度：140px；
高度：140像素；
填充：10px 16px；
边界半径：70px；
字体大小：24px；
线高：1.33；
}
.btn圈{
宽度：60px；
高度：60px；
填充：6px 0px；
边界半径：30px；
文本对齐：居中；
字体大小：12px；
线高：1.42857；
}
#btn1{
背景颜色：蓝色；
盒影：0 5px蓝色，0 0 10px#fff，0 0 20px蓝色，0 0 30px蓝色，0 0 40px蓝色，0 0 55px蓝色，0 0 0 75px蓝色；
}
#btn2{
背景色：红色；
盒影：0 0 5px#fff，0 0 10px#fff，0 0 20px红色，0 0 30px红色，0 0 40px红色，0 0 0 55px红色，0 0 0 75px红色；
}

1.
2.

你能检查一下这个片段吗？在这里你可以在

摆弄SCS

如果您想使阴影更大，可以更改长方体阴影的值

范例

box-shadow: 0 0 12px 5px #03cafc;

到

.container{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
柔性包装：包装；
}
.项目{
宽度：15雷姆；
高度：15雷姆；
背景颜色：粉红色；
边界半径：100%；
位置：相对位置；
}
.项目：在{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
显示：块；
排名：0；
左：0；
边界半径：100%；
}
.项目：第一个孩子{
背景色：#03cafc；
}
.项目：第一个孩子：之前{
盒影：0 0 12px 5px#03cafc；
背景：#03cafc；
}
.项目：第n个孩子（2）{
背景色：#ff8f4c；
}
.项目：第n个孩子（2）：之前{
盒影：0 0 12px 5px#ff8f4c；
背景#ff8f4c；
}
.项目：第n个孩子（3）{
背景色：#51eca5；
}
.项目：第n个孩子（3）：之前{
盒影：0 0 12px 5px#51eca5；
背景：#51eca5；
}
.项目：第n个孩子（4）{
背景颜色：粉红色；
}
.项目：第n个孩子（4）：之前{
盒影：0 0 12px 5px粉红色；
背景：粉红色；
}

这就是你想要的吗

在本例中，我为Button添加了两个长方体阴影。使用

  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 0px 7px rgb(0, 255, 20);

第一个用于外部辉光，第二个用于创建光环

正文{
背景：灰色；
}
.btn-circle.btn-xl{
宽度：140px；
高度：140像素；
填充：10px 16px；
边界半径：70px；
字体大小：24px；
线高：1.33；
}
.btn圈{
宽度：60px；
高度：60px；
填充：6px 0px；
边界半径：30px；
文本对齐：居中；
字体大小：12px；
线高：1.42857；
}
.btn圈：焦点{
大纲：无；
}
.ring1{
背景色：透明；
边界：0；
框阴影：0 0 20px 5px rgba（0，255，20，0.69），插入0 0 0px 7px rgb（0，255，20）；
}
.glowbtn{
背景色：#00ff14；
边界：0；
盒子阴影：0.20px 5px rgba（0.255,20,0.69）；
}
.边界环{
背景：透明；
边框：8px实心#00ff14；
盒子阴影：0.20px 5px rgba（0.255,20,0.69）；
}
.内发光{
背景：透明；
边框：8px实心#00ff14；
框阴影：0 0 20px 5px rgba（0，255，20，0.69），插入0 0 20px 7px rgba（0，255，20，0.69）；
}

3.


3.


只能使用边框和框阴影创建
3.
带内发光的环形按钮
3.

您可以在某些阴影上使用

插图

，而不能在其他阴影上使用。这将使一些阴影向内投射，另一些阴影向外投射。此外，更换您的

背景色

带

边框的规则

.btn-circle.btn-xl{
宽度：140px；
高度：140像素；
填充：10px 16px；
边界半径：70px；
字体大小：24px；
线高：1.33；
}
.btn圈{
宽度：60px；
高度：60px；
填充：6px 0px；
边界半径：30px；
文本对齐：居中；
字体大小：12px；
线高：1.42857；
}
#btn1{
边框：5px纯蓝色；
盒影：0.5px蓝色，/*0.10px#fff，*/0.20px蓝色镶嵌，0.30px蓝色镶嵌，0.40px蓝色，0.55px蓝色，0.75px蓝色；
}
#btn2{
边框：5px纯红；
盒影：0 0 5px红色，/*0 0 10px#fff，*/0 0 20px红色插图，0 0 30px红色插图，0 0 40px红色，0 0 0 55px红色，0 0 0 75px红色；
}

1.
2.

您能告诉我们预期的输出吗？检查它列出了所有非标准阴影的解决方案。如果你不支持IE的话，你可以考虑<代码>过滤器：阴影/代码>这枚带有内发光的戒指正是我想要的。谢谢你，我为这个问题挠头已经有一段时间了。现在看来很明显。再次感谢。这不是我想要的，但谢谢你抽出时间@GautamNaik提供了我想要的东西。如果你有兴趣看的话，我把它标记为答案。

  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 0px 7px rgb(0, 255, 20);