logo标签列表

圆形按钮的 CSS

cssbuttongeometry
60

我是一个初学者，非常困惑。使用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>

你能详细阐述一下吗？ - Pranjal
1
阅读有关“内联”和“块级”元素的内容，你就能回答自己的问题。 - Mohammad Usman
13个回答
79

对于 div 标签，浏览器已经提供了默认属性 display:block。对于锚标签，浏览器并没有提供display属性。您需要添加display属性。因此，请使用 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>

20

.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 的参考资料，请点击这里

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

这里输入图片描述

.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 中 span 的垂直对齐。
8

现代CSS方法中，我们现在有一些工具，如aspect-ratio和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已经停用）。当然，您的项目可能不允许使用这样的现代技术，但是尽可能地开始使用这些东西是很好的。

3
请使用这个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>

3
添加 display: block;。这是 <div> 标签和 <a> 标签之间的区别。
.btn {
      display: block;
      height: 300px;
      width: 300px;
      border-radius: 50%;
      border: 1px solid red;
    }
2

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;
}
2
尽管我看到了一个被接受的答案和其他很好的答案，但是我想分享一下我是如何解决这个问题的（只用了一行代码）。 CSS（创建一个类）： 
.circle {
    border-radius: 50%;
}

HTML（将CSS类添加到我的按钮）：

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

很简单，对吧？

注意：我所做的是正确使用ionic类，只需一行css。

在此JSFiddle上查看结果：

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

1
如果您想要一个更通用的解决方案，可以使用这个示例来随着屏幕大小进行调整。 

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

1

要创建圆形按钮，您需要使用以下代码：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接