带边框的HTML圆形按钮

Question

我想创建这种按钮。

为此，我尝试在另一个按钮内创建按钮。但它没有奏效。然后我尝试在圆圈div中创建一个按钮。然后我无法正确调整div和按钮。它看起来像这样，

以下是我的代码，

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

那么我该如何解决这个问题呢。请帮帮我！

Answer 1

使用:before按钮使用div
它会生成多边框（根据需要更改color并添加opacity）

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试这种简单方法

<强> HTML

<a href="" class="click">Click</a>

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

将以下样式添加到“button-inside”div

display: flex;
align-items: center;
justify-content: center;

Answer 4

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

试试这个。这些flex属性应该将子div放在父级的中心。我从代码中删除了保证金，因为它可能不再相关。

Answer 5

您不需要第二个元素（甚至不是伪元素），您可以使用border和box-shadow来实现此目的：

＆＃13;

＆＃13;

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;
}

＆＃13;

<button>Start</button>

＆＃13;

＆＃13;

＆＃13;

Answer 6

  <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;
}

您可以尝试此链接[codepen.io] [1]

  [1]: https://codepen.io/venumadhavdiv/pen/rvMOjN

Answer 7

尝试这个， 在您的代码中进行了一些更改

＆＃13;

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;