I'm trying to create a button that mimics the design in the code snippet. Is this method the most effective way, or is there a simpler approach I should consider? It seems like a lot of work just to achieve rounded corners.
#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>