Search code examples
htmlcssbootstrap-4rounded-corners

How to make a link button with circular borders

I am trying to make a link that looks like a button with a laterally rounded edge, but I need it to be a semi circumference, and I can't do that

the radius ends up changing the diameter of the entire button

I would like the button to look like this

button

but my result looks like this

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

div{
   padding-top: 10px
}
<div>
<a>Some text</a>
</div>

I needed it to be dynamic, meaning no matter what font size inside it would always have the same rounded shape on the sides

Solution

  • Work with em which is relative to the font-size (instead of % which is relative to the 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>