Circular buttons

Now and again you have to make a round (circular) button. This is how I did it.

https://jsfiddle.net/n2fole00/L2m1us5t/

html

<button type="button" class="btn-round btn-lg">
    <span>29</span>
</button>  

css

.btn-round {
    color: white;
    font-weight:bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
    border: none; 
    outline: none; /* remove focus after click event */
}

.btn-round.btn-lg {
    font-size: 24px;
    width: 48px;
    height: 48px;
}

.btn-round.btn-sm {
    font-size: 17px;
    width: 34px;
    height: 34px;
}

.btn-round.btn-xs {
    font-size: 12px;
    width: 24px;
    height: 24px;
}