圆形按钮 css

新手上路,请多包涵

我是一个初学者并且非常困惑,作为一个 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 825
2 个回答

对于 div 标签,浏览器已经给出了默认属性 display:block 。对于锚标记,浏览器没有显示属性。您需要为其添加显示属性。这就是为什么使用 display:block 或 display: 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>

原文由 Sagar Kodte 发布,翻译遵循 CC BY-SA 3.0 许可协议

 .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 参考, 请单击此处

原文由 Udhay Titus 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题