Circular buttons

circularbuttons.css

.circular-click-target-demo {
    font-size: 2em;
    display: table;
    border-spacing: 1em 0.45em;
    font-variant-numeric: proportional-nums;
    -moz-font-feature-settings: "pnum";
    -webkit-font-feature-settings: "pnum";
    font-feature-settings: "pnum";
}
.circular-click-target-demo a {
    background-color: #ff948a;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
.circular-click-target-demo a:hover {
    text-decoration: none;
    background-color: cyan;
}

circularbuttons.html

<div class='circular-click-target-demo' >
<p>
    <a href='whatever.html'>1</a> <a href='whatever.html'>2</a> <a href='whatever.html'>3</a> <a href='whatever.html'>4</a> 
</p>
<p>
    <a href='whatever.html'>5</a> <a href='whatever.html'>6</a> <a href='whatever.html'>7</a> <a href='whatever.html'>8</a> 
</p>
<p>
    <a href='whatever.html'>9</a> <a href='whatever.html'>10</a> <a href='whatever.html'>11</a> <a href='whatever.html'>12</a> 
</p>
<p>
    <a href='whatever.html'>13</a> <a href='whatever.html'>14</a> <a href='whatever.html'>15</a> <a href='whatever.html'>16</a> 
</p>
</div>