圆形按钮CSS [英] Circle button css

问题描述

我是一个初学者，非常困惑，作为div标签，当我使用border-radius设置相同的宽度和高度时:50％总是变成圆形. 但是带有标签a，以防万一我想做一个圆形按钮，那样行不通.这是当我尝试使圆形边框按钮可点击时.

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.

<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的原因.会起作用的.

For div tag there is already default property display:block given 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:block or display:inline-block. It will work.

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

这篇关于圆形按钮CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！