Perfectly circular click targets, perfectly centered numbers within them, no spillover or incomplete filling of the apparent click target with the actual one.
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>
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;
}
