沒有畫布的按鈕內的圓圈。 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; 
}