圆形按钮css

Question

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

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


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

Answer 1

对于div标记display:block,浏览器已经提供了默认属性.对于锚标记,浏览器没有显示属性.您需要向其添加显示属性.这就是使用display:block或显示的原因: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 2

对于现代 CSS 方法，我们现在有一些工具，例如纵横比，grid可以创建完美的圆形按钮，如下所示：

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

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

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

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

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

现在它与几乎所有浏览器兼容（现在 IE 已被淘汰）。当然，您的项目可能不允许这样的现代性，但是当我们可以的时候开始使用这些东西是很好的。

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>

对于jsfiddle参考点击这里

Answer 4

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

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

但问题是+，由于字体差异，它可能不会在所有浏览器/平台中完全垂直居中...另请参阅这个问题（及其答案）：当字体大小很大时，div 内的垂直对齐