Question

我正在使用HTML，CSS和jQuery创建一个Simon游戏。我的设计基于this game on iOS。

我真的很想让按钮看起来像戒指！

我尝试了一些使用相对父div和绝对子div的解决方案，但问题是因为我正在使用Bootstrap网格系统并且它具有响应性;当我检查网页调整div位置或调整屏幕比例时，一切都会移动，看起来很糟糕。

在按钮上使用box-shadow: inset创建戒指是最有希望的，但我已经使用盒子阴影来创建一个霓虹灯发光，这对我来说不是一个真正的选择。（如果有办法做到这两点，这可能是有希望的。）

.btn-circle.btn-xl {
  width: 140px;
  height: 140px;
  padding: 10px 16px;
  border-radius: 70px;
  font-size: 24px;
  line-height: 1.33;
}

.btn-circle {
  width: 60px;
  height: 60px;
  padding: 6px 0px;
  border-radius: 30px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

#btn1 {
  background-color: blue;
  box-shadow: 0 0 5px blue, 0 0 10px #fff, 0 0 20px blue, 0 0 30px blue, 0 0 40px blue, 0 0 55px blue, 0 0 75px blue;
}

#btn2 {
  background-color: Red;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px red, 0 0 30px red, 0 0 40px red, 0 0 55px red, 0 0 75px red;
}

<div class="row">
  <div class="col-md-3 offset-md-3">
    <button type="button" id="btn1" class="btn btn-default btn-circle btn-xl">1</button>
  </div>

  <div class="col-md-3">
    <button type="button" id="btn2" class="btn btn-default btn-circle btn-xl">2</button>
  </div>
</div>

非常感谢你的帮助。

Answer 1

这是你想要的吗？

在示例中，我为buttton添加了2个框阴影。使用

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

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

body {
  background: grey;
}

.btn-circle.btn-xl {
  width: 140px;
  height: 140px;
  padding: 10px 16px;
  border-radius: 70px;
  font-size: 24px;
  line-height: 1.33;
}

.btn-circle {
  width: 60px;
  height: 60px;
  padding: 6px 0px;
  border-radius: 30px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}

.btn-circle:focus {
  outline: none;
}

.ring1 {
  background-color: transparent;
  border: 0;
  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 0px 7px rgb(0, 255, 20);
}

.glowbtn {
  background-color: #00ff14;
  border: 0;
  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69);
}

.border-ring {
  background: transparent;
  border: 8px solid #00ff14;
  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69);
}

.inner-glow {
  background: transparent;
  border: 8px solid #00ff14;
  box-shadow: 0 0 20px 5px rgba(0, 255, 20, 0.69), inset 0 0 20px 7px rgba(0, 255, 20, 0.69);
}

<div class="row">


  <div class="col-md-3">
    <button type="button" class="btn btn-default btn-circle btn-xl ring1">3</button>
  </div>
  <br/>
  <div class="col-md-3">
    <button type="button" class="btn btn-default btn-circle btn-xl glowbtn">3</button>
  </div>
  <br/>


  <h3>Can be created using only border and box shadow</h3>
  <div class="col-md-3">
    <button type="button" class="btn btn-default btn-circle btn-xl border-ring">3</button>
  </div>


  <h3>ring button with inner glow</h3>
  <div class="col-md-3">
    <button type="button" class="btn btn-default btn-circle btn-xl inner-glow">3</button>
  </div>

</div>

Answer 2

您可以查看该代码段吗？在这里，您可以在

中找到它

摆弄SCSS https://jsfiddle.net/ckm1qwgq/

如果你想让阴影更多，你可以更改框阴影的值

例如

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

到

box-shadow: 0 0 40px 9px #03cafc;

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  width: 15rem;
  height: 15rem;
  background-color: pink;
  border-radius: 100%;
  position: relative;
}
.item:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  border-radius: 100%;
}
.item:first-child {
  background-color: #03cafc;
}
.item:first-child:before {
  box-shadow: 0 0 12px 5px #03cafc;
  background: #03cafc;
}
.item:nth-child(2) {
  background-color: #ff8f4c;
}
.item:nth-child(2):before {
  box-shadow: 0 0 12px 5px #ff8f4c;
  background: #ff8f4c;
}
.item:nth-child(3) {
  background-color: #51eca5;
}
.item:nth-child(3):before {
  box-shadow: 0 0 12px 5px #51eca5;
  background: #51eca5;
}
.item:nth-child(4) {
  background-color: pink;
}
.item:nth-child(4):before {
  box-shadow: 0 0 12px 5px pink;
  background: pink;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

在CSS中创建“环形”按钮

2 个答案: