HTML circle button with border

Question

I want to create this kind of button.

For that I tried to create button inside another button. But it not worked. Then I tried to create a button inside a circle div.Then I couldn't adjust the div and button properly. It looks like this,

Following is my code,

<div class="buton-inside" style="border-radius: 50%; background-color: #1E1C1C; height: 120px; width: 120px">
  <button class="button" style="border-radius: 50%; background-color: #1eff5b; height: 100px; width: 100px; margin-left:0.5px; margin-right:0.5px; margin-top:0.5px; margin-bottom:0.5px"></button>
</div>

So how can I fix this. Please help me !

Answer 1

Use :before button insted use div
It makes multi border(change color as you want and add opacity)

.button {
  position: relative;
  border: 5px solid #f00;
}
.button:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: -10px;
    left: -11px;
    right: 5px;
    bottom: 87px;
    border: 56px solid #252523;
    border-radius: 50%;
}

  <button class="button" style="border-radius: 50%; background-color: #1eff5b; height: 100px; width: 100px; margin-left:0.5px; margin-right:0.5px; margin-top:0.5px; margin-bottom:0.5px"></button>