如何使放置在按鈕內的unicode更大？

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

，如果你使用的引導，我recommened這個給你 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

你可以使用一個跨度或股利和風格它是圓。這可以通過許多方式完成。下面只是一個例子。希望它可以讓你在正確的方向

.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: 0 10px; 
 
    text-decoration: none; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 38px; 
 
    height: 22px; 
 
    justify-content: flex-start; 
 
} 
 
.btn-active span { 
 
    display: block; 
 
    padding: 5px; 
 
    background: green; 
 
    border-radius: 50%; 
 
}

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