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