Question

我是初学者级编码器，我正在尝试使用unicode（更改为白色）在按钮内创建白色圆圈，但我真的不知道如何增加unicode大小并将其置于按钮。

如果你有任何其他选项将圆圈放在按钮内，请帮助我（它不必是unicode，并且放置unicode是我能想到的唯一方法）。

我真正想要做的是当圆圈对齐时，它处于活动状态，但是当圆圈左对齐时，它将被更改为无效状态。我正在努力解决这个问题。

谢谢。

.notification {
  display: flex;
}

.push-title {
  font-size: 1.15rem;
}

.push-active {
  margin-left: 20%;
  color: #8A8A8A;
}

.btn-active {
  margin-left: 3%;
  background: #FF512F;
  background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
  background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
  background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
  background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
  background-image: linear-gradient(bottom right, #FF512F, #DD2476);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  padding: 1px 24px 1px 24px;
  text-decoration: none;
}

        <div class="notification">
          <div class="push-title">Push Notifications</div>
          <div class="push-active">Active</div>
          <a href="" class="btn-active">•</a>
        </div>

Answer 1

CSS

.notification {
  display: flex;
}

.push-title {
  font-size: 1.15rem;
}

.push-active {
  margin-left: 20%;
  color: #8A8A8A;
}

.btn-active {
  margin: 0 auto;
  background: #FF512F;
  background-image: -webkit-linear-gradient(left top, #FF512F, #DD2476);
  background-image: -moz-linear-gradient(left top, #FF512F, #DD2476);
  background-image: -ms-linear-gradient(bottom right, #FF512F, #DD2476);
  background-image: -o-linear-gradient(bottom right, #FF512F, #DD2476);
  background-image: linear-gradient(bottom right, #FF512F, #DD2476);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  padding: 1px 24px 1px 24px;
  text-decoration: none;
  color:white;
  height:30px;
  font-size:60px;
  line-height:28px;
}

HTML

<div class="notification">
   <div class="push-title">Push Notifications</div>
   <div class="push-active">Active</div>
   <a href="" class="btn-active">•</a>
</div>

Answer 2

如果你使用bootstrap，我会为你推荐这个 http://bootsnipp.com/snippets/x8pBm

Answer 3

您可以在checkbox上使用伪元素，并根据是否选中状态切换状态。

input {
  display: none;
}
label {
  width: 1.5em;
  height: 1em;
  background: red;
  border-radius: .5em;
  display: inline-block;
  overflow: auto;
  position: relative;
  text-indent: 9999px;
  cursor: pointer;
}
label:after {
  content: '';
  width: .5em;
  height: .5em;
  background: black;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-100%,-50%);
  transition: transform .25s, background .15s;
}
input:checked + label:after {
  transform: translate(0%,-50%);
  background: white;
}

<input id="checkbox" type="checkbox"><label for="checkbox">active</label>

Answer 4

您可以使用span或div并将其设置为圆形。这可以通过多种方式完成。只是下面的一个示例。希望它能让你朝着正确的方向前进

<div class="notification">
          <div class="push-title">Push Notifications</div>
          <div class="push-active">Active</div>
          <a href="" class="btn-active"><span></span></a>
        </div>

{{1}}

如何使unicode更大，放在按钮内？

4 个答案: