圆形按钮 css

Question

我是一个初学者并且很困惑，作为一个 div 标签，当我使用border-radius: 50% 给出相同的宽度和高度时，它总是变成圆形。 但是如果我想制作一个圆形按钮，使用标签 a，它不会那样工作。这是我尝试使圆形边框按钮可点击的时候。

 
.btn {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
}

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>
 

Answer 1

添加display: block;。这就是<div> 标签和<a> 标签之间的区别

.btn {
      display: block;
      height: 300px;
      width: 300px;
      border-radius: 50%;
      border: 1px solid red;
    }

Answer 2

对于div 标签，浏览器已经提供了默认属性display:block。对于锚标记，浏览器没有显示属性。您需要为其添加显示属性。这就是为什么使用display:block 或 display:inline-block。它会起作用的。

.btn {
  display:block;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
  
}

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>

Answer 3

.round-button {
  width:25%;
}
.round-button-circle {
  width: 100%;
  height:0;
  padding-bottom: 100%;
  border-radius: 50%;
  border:10px solid #cfdcec;
  overflow:hidden;
        
  background: #4679BD; 
  box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
  background:#30588e;
}
.round-button a {
  display:block;
  float:left;
  width:100%;
  padding-top:50%;
  padding-bottom:50%;
  line-height:1em;
  margin-top:-0.5em;
        
  text-align:center;
  color:#e2eaf3;
  font-family:Verdana;
  font-size:1.2em;
  font-weight:bold;
  text-decoration:none;
}

<div class="round-button"><div class="round-button-circle"><a href="http://example.com" class="round-button">Button!!</a></div></div>

或者很简单的<a/>

.round-button {
    display:block;
    width:80px;
    height:80px;
    line-height:80px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #555777;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
.round-button:hover {
    background: #777555;
}

<a href="http://example.com" class="round-button">Button</a>

供 jsfiddle 参考 click here

Answer 4

使用这个 css。

.roundbutton{
          display:block;
          height: 300px;
          width: 300px;
          border-radius: 50%;
          border: 1px solid red;
          
        }

<a class="roundbutton" href="#"><i class="ion-ios-arrow-down"></i></a>

Answer 5

虽然我也可以看到一个公认的答案和其他很好的答案，但我想分享我为解决这个问题所做的工作（仅一行）。

CSS（创建类）：

.circle {
    border-radius: 50%;
}

HTML（将那个 css 类添加到我的按钮）：

<a class="button circle button-energized ion-paper-airplane"></a>

这么简单对吧？

注意：我实际上所做的只是用一行 css 正确使用离子类。

在这个 JSFiddle 上查看你自己的结果：

https://jsfiddle.net/nikdtu/cnx48u43/

Answer 6

HTML：

<div class="bool-answer">
  <div class="answer">Nej</div>
</div>

CSS：

.bool-answer {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 7

这是一个扁平设计的圆形按钮：

.btn {
  height: 80px;
  line-height: 80px;  
  width: 80px;  
  font-size: 2em;
  font-weight: bold;
  border-radius: 50%;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  cursor: pointer;
}

<div class="btn">+</div>

但问题是 + 可能不会在所有浏览器/平台中完全垂直居中，因为字体差异......另请参阅这个问题（及其答案）：Vertical alignement of span inside a div when the font-size is big

Answer 8

对于创建圆形按钮，您是以下代码：

.circle-right-btn {
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid #fefefe;
    margin-top: 24px;
    font-size:22px;
}

<input  class="circle-right-btn" type="submit" value="<">

Answer 9

带有框阴影的圆形按钮https://v2.vuetifyjs.com/en/components/floating-action-buttons/

.btn {
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 2em;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  border: none;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  bottom: 10%;
  right: 4%;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

<div class="btn">+</div>

Answer 10

问题在于a 标签的实际宽度取决于其内容。您的代码在 a 标记中没有文本，因此它看起来像一个饥饿的圆圈。如果您在a 旁边使用div 标签，您将获得所需的结果。

检查此代码：

.btn {
  background-color: green;
  border-radius: 50%;
  /*this will rounden-up the button*/
  width: 80px;
  height: 80px;
  /*keep the height and width equal*/
}

<a href="#">
 <!--use the URL you want to use-->
 <button class="btn">press me</button>
 </a>

Answer 11

你总是可以的

html:<div class = "btn"> <a> <button> idk whatever you want to put in the button </button> </a> </div>

然后做

CSS： .btn a button { border-radius: 50% }

在我看来很完美

Answer 12

如果您想要一个更通用的解决方案，可以根据屏幕大小调整大小，您可以使用此示例。

.btnCircle {
    border-radius: 50% ;
    padding: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width:3vw;
    height:3vw; 
    font-size: 2vw;
    outline:none;
    border: none;
  }
  
  .btnBackgroundColor{
    background: green;
  }
  
  .btnColor{
    color: white;
  }
  

<button class="btnCircle btnBackgroundColor btnColor">Yes</button>

Answer 13

对于现代 CSS 方法，我们现在有一些工具，例如 aspect-ratio 和 grid，可以像这样创建完美的圆形按钮：

  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;

对内联元素（即a 标签）设置固定的高度和宽度无效。就像其他人提到的，我们需要将 display 属性设置为块元素。使用网格可以轻松居中，并且通常可以更好地控制按钮内的内容。

加上一些可选的填充和居中：

（留下红色边框，因为 OP 有它）

.btn {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0 2em;
  border: 1px solid red;
}

现在与所有现代浏览器兼容。当然，您的项目可能不允许这样的现代性，但如果我们可以开始使用这些东西是很好的。