HTML/CSS button with inverted half circle on both sides of button - html

Question

I'm trying to create a button with inverted half circles on the sides.
I've tried creating a half-circle and placing it at the end of the button but the outcome doesn't look pleasant.
The outcome should look something like this:
button with half circle at both end

Answer 1

You can just use CSS after and before Pseudo-Elements or else you can also use the CSS shadow property to achieve this kind of design. The below code shows with CSS after and before Pseudo-Elements.
https://codepen.io/Lijo_Chacko/pen/abLjEaw
HTML
<button class="circled-button">
Button
</button>
CSS
.circled-button
{
background:#000;
box-shadow:0px 0px 0px;
border:0px;
padding:20px 15px;
min-width:250px;
position:relative;
overflow:hidden;
color:#fff;
font-size:20px;
border-radius: 9px;
}
.circled-button:after
{
content:'';
display:block;
width:20px;
height:20px;
border-radius:50px;
position:absolute;
left:-9px;
background:#fff;
top:50%;
transform:translateY(-50%);
}
.circled-button:before
{
content:'';
display:block;
width:20px;
height:20px;
border-radius:50px;
position:absolute;
right:-9px;
background:#fff;
top:50%;
transform:translateY(-50%);
}