How to make the unicode larger which is placed inside the button? - html

Question

I'm beginner class coder and I'm trying to create white circle inside the button using the unicode (Change to white color), but I really don't know how to increase the unicode size and place it center inside the button.
If you have any other options to put circle inside button, please help me out (It doesn't have to be unicode and putting unicode was the only way I can think of).
What I actually want to do is when the circle is aligned right, it is active status, but when the circle is aligned left, it will be changed to deactive status. I'm struggling with this.
Thank you.
.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>
•
</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>
•
</div>

Answer 2

if you use bootstrap , i recommened this for you
http://bootsnipp.com/snippets/x8pBm

Answer 3

You could use a span or div and style it to be the circle. This can be done in many ways. Just a sample below. Hope it puts you in the right direction
.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>
<span></span>
</div>

Answer 4

You can use a pseudo element on a checkbox and toggle the status based on whether it's selected or not.
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>