如何制作带有圆形边框的链接按钮[重复]答案

【问题标题】：How to make a link button with circular borders [duplicate]如何制作带有圆形边框的链接按钮[重复]
【发布时间】：2019-12-10 09:57:57
【问题描述】：

我正在尝试制作一个看起来像带有横向圆形边缘的按钮的链接，但我需要它是一个半圆周，我不能这样做

半径最终会改变整个按钮的直径

我希望按钮看起来像这样

但我的结果看起来像这样

a{
   border-radius: 50%;
   padding: 10px;
   background-color: #999;
}

div{
   padding-top: 10px
}

<div>
<a>Some text</a>
</div>

我需要它是动态的，这意味着无论里面的字体大小如何，它的侧面总是有相同的圆形

【问题讨论】：

尝试使用 px 而不是 %
是的，这是我投入大量像素来确保的作品
为什么要复制？提出的问题可能是同一主题，但不一样

标签： html css bootstrap-4 rounded-corners

【解决方案1】：

使用像em这样的相对单位。

.rounded-link {
  border-radius: 2em;
  padding: 0.3em;
  background-color: #999;
  display: block;
  margin: 10px;
  text-align: center;
}

.big {
  font-size: 30px;
}

.bigger {
  font-size: 50px;
}

<a class="rounded-link">Some text</a>
<a class="big rounded-link">Some text</a>
<a class="bigger rounded-link">Some text</a>

【讨论】：

【解决方案2】：

这是图片的副本：

  a {
      border-radius: 2em;
      background-color:#FAFAFA;
      color: #562185;
      box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.1);
      padding: 0.5rem 3rem;
    }

    div {
      padding-top: 10px;
    }

  <div>
      <a>Some text</a>
    </div>

【讨论】：

试试font-size: 240px;。或font-size: 8px;。使用rem 而不是em 也是一个坏主意，因为实际链接font-size 很容易有很大不同。
嗯，你是对的，em 将是一个更好的解决方案。我会更新

【解决方案3】：

使用相对于font-size 的em（而不是相对于width 的%）：

a {
  border-radius: 2em;
  padding: 0.4em 2em;
  background-color: #999;
}

div {
  margin: 30px 0;
}

.s { font-size: 10px; }

.m { font-size: 20px; }

.l { font-size: 40px; }

<div class="s">
  <a>Some text</a>
</div>

<div class="m">
  <a>Some text</a>
</div>

<div class="l">
  <a>Some text</a>
</div>

【讨论】：