Clipped Button in css not as Expected - html

Question

Expected
.clipped-button {
height: 42px;
min-width:120px;
width: auto;
display: block;
border:none;
border-radius:2px;
align-items:center;
clip-path: polygon(0px 0%, 0px 60%, 18px 100%, 100% 100%, 100% 40%, calc(100% - 18px) 0px);
padding: 2.625px;
background-color: #993029;
}
.btn {
width: 100%;
height: 100%;
background-color: rgb(205, 65, 58);
display:flex;
justify-content:center;
align-items:center;
clip-path: polygon(0px 0%, 0px 60%, 16px 100%, 100% 100%, 100% 40%, calc(100% - 16px) 0px);
color: rgb(255, 255, 255);
}
<button class="clipped-button"><div class="btn">Click Me</div>
</button>
Not getting the clipped corners rounded
Please help to round the clipped corners at top right and bottom left if possible

Answer 1

Rather than a clip-path perhaps something similar to the following is an option.
.button {
display: inline-block;
width: 200px;
height: 50px;
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
text-align: center;
text-decoration: none;
justify-content: center;
align-items: center;
outline: none;
color: #fff;
border-radius: 25px;
border: 5px solid rgb(190, 40, 40);
background-color: rgba(200, 60, 60, 0.6);
background-image: linear-gradient(to bottom right, rgba(255,0,0,0), rgba(200, 60, 60, 0.8));
}
.button:hover {
box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
/*--background-color: rgba(200, 60, 60, 1.0); --alt color--*/
background-image: linear-gradient(to bottom right, rgba(255,0,0,0), rgba(250, 100, 100, 1.0));
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\1F846 \1F846';
position: absolute;
opacity: 0;
top: -2px;
right: -40px;
transition: 0.5s;
}
.button:hover span {
padding-right: 40px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<button class="button"><span> Click Me </span></button>