Круги внутри кнопки без холста. html/javascript

Question

Я пытаюсь создать кнопку, которая выглядит так: https://jsfiddle.net/b6vamcb0/3/. Я доволен тем, как это выглядит, и все, но я хочу сделать это, не используя холст, потому что это просто уродливо. Возможно ли это, или я должен просто придерживаться материала холста?

Вот код в случае, если jsfiddle не работает.

HTML

<button id="theButton1"> 
     <canvas id="canvas" width="100" height="100"></canvas> 
</button> 

JS

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(51, 52, 40, 0, 2 * Math.PI, false); 
ctx.fillStyle = 'white'; 
ctx.fill(); 
ctx.lineWidth = 5; 
ctx.strokeStyle = 'white'; 
ctx.stroke(); 

ctx.beginPath(); 
ctx.arc(51, 52, 30, 0, 2 * Math.PI, false); 
ctx.fillStyle = 'black'; 
ctx.fill(); 
ctx.lineWidth = 5; 
ctx.strokeStyle = 'black'; 

CSS

#theButton1{ 
    cursor: pointer; 
    margin:auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 125px; 
    height: 125px; 
    background-color: #000; 
    border-radius: 10px; 
} 

Answer 1

Вы можете иметь элемент внутри, что бы белый круг:

#theButton1{ 
 
    cursor: pointer; 
 
    width: 125px; 
 
    height: 125px; 
 
    background-color: #000; 
 
    border-radius: 10px; 
 
} 
 

 
#circle{ 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 60%; 
 
    border: 12px solid white; 
 
    margin: auto; 
 
}

<button id="theButton1"> 
 
     <div id="circle"></div> 
 
</button>

Answer 2

Вот быстрый JSFiddle пример того, как можно достичь желаемого результата.

https://jsfiddle.net/sjgaajgp/2/

<div class="button"> 
    <div class="circle"></div> 
</div> 

Воспользовавшись display: table и display: table-cell окружность может быть расположен идеально в центре кнопочного элемента.

.button { 
    padding: 10px; 
    background-color: black; 
    display: table; 
} 

.button .circle { 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    border: 5px solid white; 
    box-sizing: border-box; 
    display: table-cell; 
}