button - 圆形按钮 css

我是一个初学者,现在非常困惑,当我为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;


}



时间:

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

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

使用这里 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>

添加 display: block;<div> 标记和 <a> 标记之间的区别


.btn {


 display: block;


 height: 300px;


 width: 300px;


 border-radius: 50%;


 border: 1px solid red;


 }



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;


}



虽然我可以看到一个公认的答案和其他很好的答案但想到分享我为解决这个问题所做的事( 只在一行中)

( 创建了一个类):


.circle {


 border-radius: 50%;


}



HTML ( 将css类添加到我的按钮):


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



这么简单?

注意:我实际上做的是正确使用只有一行css的ionic类。

在这个JSFiddle上看到你自己的结果:

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

...