HTML circle button with border - html

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>

Answer 2

Try this easy way
HTML
Click
CSS
.click {
background: #06F;
color: #fff;
width: 70px;
height: 70px;
line-height: 70px;
display: block;
border-radius: 50%;
text-align: center;
text-decoration:none;
border:3px solid #fff;
box-shadow: 0px 0px 0px 3px #06F;
}

Answer 3

You don't need a second element (not even a pseudo element), You can simply achieve this with a border and a box-shadow:
button {
display: block;
padding: 50px 38px;
border-radius: 50%;
border: 3px solid black;
background: #19361e;
box-shadow: 0 0 0 3px #19361e;
color: #4bd763;
font-size: 1.5em;
margin: 30px auto;
}
body {
background: black;
}
<button>Start</button>

Answer 4

Add the following styles to "button-inside" div
display: flex;
align-items: center;
justify-content: center;

Answer 5

<div class="buton-inside" style="border-radius: 50%; background-color: #1E1C1C; height: 120px; width: 120px; display: flex; align-items: center; justify-content: center;">
<button class="button" style="border-radius: 50%; background-color: #1eff5b; height: 100px; width: 100px;"></button>
</div>
Try this. Those flex properties should put the child divs in the center of the parent. I removed the margin from your code since it might not be relevant anymore.

Answer 6

TRY THIS,
made some changes in your code
<div class="buton-inside" style="border-radius: 50%; background-color: #1E1C1C; height: 120px; width: 120px;text-align:center">
<button class="button" style=" border-radius: 50%;
background-color: #1eff5b;
height: 100px;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;"></button>
</div>

Answer 7

<div class="parent">
<button>Start</button>
</div>
.parent {
width: 200px;
height: 200px;
border: 2px solid green;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-sizing: border-box;
}
button {
width: 100%;
height: 100%;
border-radius: 50%;
padding: 10px;
background: green;
}
You can try this link [codepen.io][1]
[1]: https://codepen.io/venumadhavdiv/pen/rvMOjN