CSS Number in a Circle

by El_Mehdi

HTML

<span class="numberCircle clrRose"><span>1</span></span>
<span class="numberCircle clrRose"><span>10</span></span>
<span class="numberCircle clrRose"><span>100</span></span>
<span class="numberCircle clrRose"><span>1000</span></span>

CSS

.numberCircle {
    font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 0px;
    border-radius: 50%;
    font-size: 12px;
    min-width: 38px;
    min-height: 38px;
}

.numberCircle span {
    display: inline-block;
    padding-top: 50%;
    padding-bottom: 50%;
    margin-left: 1px;
    margin-right: 1px;
}

.clrGreen {
    background: #51a529;
}
.clrBlue {
    background: #1e5bab;
}
.clrRose {
    background: #e6568b;
}
.clrOrange {
    background: #ec8234;
}
.clrBlueciel {
    background: #21adfc;
}
.clrMauve {
    background: #7b5d99;
}

JavaScript

/* Creating a number within a circle using CSS */