javascript - 没有 Canvas 的按钮内的圆圈。 html/javascript

Question

我正在尝试创建一个看起来像这样的按钮 https://jsfiddle.net/b6vamcb0/3/ .我对它的外观和所有内容都很满意，但我想在不必使用 Canvas 的情况下完成它，因为那太丑了。这是可能的还是我应该坚持使用 Canvas ？

这是防止 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>