I'm looking to design a button similar to the one demonstrated in this example. While I like how it appears, I prefer not to use canvas as it is not visually pleasing. Is there a way to achieve this without using canvas, or should I stick with it?
Below is the code for reference in case the jsfiddle link is inaccessible.
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;
}