html - 如何使放置在按钮内的unicode变大？

Question

我是初级编码员，我正在尝试使用 unicode(更改为白色)在按钮内创建白色圆圈，但我真的不知道如何增加 unicode 大小并将其放在中心内按钮。

如果您有任何其他选项可以将圆圈放在按钮内，请帮助我(它不一定是 unicode 并且放置 unicode 是我能想到的唯一方法)。

其实我想做的是当圆圈右对齐时，它是active状态，但是当圆圈左对齐时，它会变成deactive状态。我正在为此苦苦挣扎。

谢谢。

.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>