Round button

Clickable round button with centred text.

by Leon

HTML

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

<button type="button" class="btn-round btn-sm btn-number">
  <span>20</span>
</button>  

<button type="button" class="btn-round btn-xs btn-number">
  <span>21</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;
}