CSS 圆形按钮css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38320878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Circle button css
提问by pexichdu
I'm a beginner and very confused, as a div tag when I give the same width and height with border-radius: 50% it always becomes circle. but with the tag a in case I want to make a circle button, It doesnt work that way. This is when I try to make a circle border button clickable.
我是一个初学者并且很困惑，作为一个 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;
}
回答by Sagar Kodte
For divtag there is already default property display:blockgiven by browser. For anchor tag there is not display property given by browser. You need to add display property to it. That's why use display:blockor display:inline-block. It will work.
对于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>回答by Udhay Titus
.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>or very simple for <a/>
或非常简单 <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>for jsfiddle reference click here
有关 jsfiddle 参考，请单击此处
回答by Udhay Titus
use this css.
使用这个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>回答by Hyman Ducasse
Add display: block;. That's the difference between a <div>tag and an <a>tag
添加display: block;. 这就是<div>标签和<a>标签的区别
.btn {
display: block;
height: 300px;
width: 300px;
border-radius: 50%;
border: 1px solid red;
}
回答by lesyk
HTML:
HTML：
<div class="bool-answer">
<div class="answer">Nej</div>
</div>
CSS:
CSS：
.bool-answer {
border-radius: 50%;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
回答by Basj
Here is a flat design circle button:
这是一个平面设计的圆形按钮：
.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>but the problem is that the +might not be perfectly centered vertically in all browsers / platforms, because of font differences... see also this question (and its answer): Vertical alignement of span inside a div when the font-size is big
但问题是+，由于字体差异，它可能不会在所有浏览器/平台中完全垂直居中...另请参阅此问题（及其答案）：当字体大小很大时，div 内的垂直对齐
回答by Nikhil Maheshwari
Though I can see an accepted answer and other great answers too but thought of sharing what I did to solve this issue (in just one line).
虽然我也可以看到一个公认的答案和其他很棒的答案，但我想分享我为解决这个问题所做的工作（仅在一行中）。
CSS ( Created a Class ) :
CSS（创建一个类）：
.circle {
border-radius: 50%;
}
HTML (Added that css class to my button) :
HTML（将该 css 类添加到我的按钮）：
<a class="button circle button-energized ion-paper-airplane"></a>
So Easy Right ?
这么容易吧？
Note :What I actually did was proper use of ionic classes with just one line of css.
注意：我实际上所做的是仅用一行 css 正确使用 ionic 类。
See Result your self on this JSFiddle :
在这个 JSFiddle 上查看你自己的结果：
