<div class="sampleB12"></div>

.sampleB12{
width:140px;
height:140px;
border-radius:50%;
margin:10px auto 0 auto;
background-color:#000;
background-image:
radial-gradient(#000 50px,transparent 50px),
radial-gradient(#fff 50px,transparent 53px),
radial-gradient(#fff 5px,rgba(120,120,255,0.5) 10px,#000 20px);
background-position:1px 1px,0 0,-35px -35px;
}

<center><a href="" class="sampleB12A">リンク文字</a></center>

.sampleB12A{
display:inline-block;/*a要素に幅や高さを指定する為に必要*/
width:140px;
height:140px;
border-radius:50%;
color:#fff;/*リンク文字の色(白)*/
text-decoration:none;/*リンク文字の下線を消す*/
line-height:140px;/*リンク文字を中央に(縦方向)*/
text-align:center;/*リンク文字を中央に(横方向)*/
background-color:#000;
background-image:
radial-gradient(#000 50px,transparent 50px),
radial-gradient(#fff 50px,transparent 53px),
radial-gradient(#fff 5px,rgba(120,120,255,0.5) 10px,#000 20px);
background-position:1px 1px,0 0,-35px -35px;
}