How to make a pill shape button with HTML and CSS?

user_4398966 0
Viewed 2570

I'm trying to design a button that looks like the one in the snippet. Is the approach taken best practice or is there a more obvious way of doing this? Seems like a lot of overhead just to get the rounded edges.

#p1,#p2{
   height:25px;
   width:25px;
   border-radius:50% 0 0 50%;
   background-color:blue;  
}

#p2{
   border-radius:0 50% 50% 0;
}
   
button{
   height:25px;
   width:75px;
   background-color:blue;
   border:none;
   color:white;
}

#container{
   display:flex;
   align-items:center;
}
<div id='container'>
   <p id='p1'></p> 
   <button>Update</button>
   <p id='p2'></p>
</div>

css html
2 Answers

All you need is to set a border-radius greater than the button's height. It gives you that pill shape. Like so :

button{
   height:25px;
   width:75px;
   border-radius: 30px;
   background-color:blue;
   border:none;
   color:white;
}
<button>Update</button>

user_152886410

You don't need the

elements at all, just add the border-radius to the button directly

button{
   height:25px;
   width:110px;
   background-color:blue;
   border:none;
   color:white;
   border-radius: 50px;
}

#container{
   display:flex;
   align-items:center;
}
<div id='container'>
   <button>Update</button>
</div>

user_181427210
Related