title: Circles within button without canvas. html/javascript
body: <p>I'm trying to create a button which looks like this <a href="https://jsfiddle.net/b6vamcb0/3/" rel="nofollow">https://jsfiddle.net/b6vamcb0/3/</a>. 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?</p>
  
  <p>Here's the code in case jsfiddle is down.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button id="theButton1"&gt;
          &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>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';
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>