圆形按钮的 CSS

Question

圆形按钮的 CSS

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>

- pexichdu

你能详细阐述一下吗？ - Pranjal

1

阅读有关“内联”和“块级”元素的内容，你就能回答自己的问题。 - Mohammad Usman

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SK-the-Learner · Answer 1

问题是 a 标签的实际宽度取决于其内容。您的代码在 a 标签中没有文本，因此它看起来像一个饥饿塌陷的圆形。如果您在 a 旁边使用 div 标签，您将获得所需的结果。

请检查以下代码：

.btn {
  background-color: green;
  border-radius: 50%;
  /*this will rounden-up the button*/
  width: 80px;
  height: 80px;
  /*keep the height and width equal*/
}

<a href="#">
 <!--use the URL you want to use-->
 <button class="btn">press me</button>
 </a>

- user7396942 · Answer 2

一个带有盒子阴影的圆形按钮 https://v2.vuetifyjs.com/zh-Hans/components/floating-action-buttons/。

.btn {
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 2em;
  border-radius: 50%;
  background-color: red;
  color: white;
  text-align: center;
  border: none;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  bottom: 10%;
  right: 4%;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

<div class="btn">+</div>

- thatboii · Answer 3

你可以这样做：

HTML：<div class="btn"><a><button>随便放想要的按钮内容</button></a></div>

然后再这样做：

CSS：.btn a button { border-radius: 50% }

在我看来，这样完美地解决了问题。