Joe Jacksson Joe Jacksson - 5 months ago 24
CSS Question

Circles within button without canvas. html/javascript

I'm trying to create a button which looks like this https://jsfiddle.net/b6vamcb0/3/. I'm happy with how it looks and all but I want to do it without having to use a canvas because that is just ugly. Is this possible or should I just stick with the canvas stuff?

Here's the code in case jsfiddle is down.

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

You can have a element inside that would be the white circle:

#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>