如何制作带有圆形边框的 link 按钮

Question

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

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

我希望按钮看起来像这样

但我的结果是这样的

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

div{
   padding-top: 10px
}

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

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

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

Answer 2

使用相对于 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>

Answer 3

这是图像的副本：

  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>

如何制作带有圆形边框的 link 按钮

How to make a link button with circular borders

html

css

bootstrap-4

rounded-corners