How to make such a button - html

Question

enter image description here
It needs to meet the following conditions
The button needs to have a slanted edge
Shadows on the bottom and right
Each corner has border-radius
The background color is gradient
The width of the button is dynamic
This is some data given by the designer
width: 128px;
height: 48px;
background: linear-gradient(317deg, #0099EE 0%, #0077EE 100%);
box-shadow: 0px 3px 0px 0px #0482CC, 0px 2px 4px 0px rgba(10, 127, 238, 0.3);
border-radius: 100px 4px 4px 100px;
width: 192px;
height: 48px;
background: linear-gradient(133deg, #FD7F5A 0%, #F53841 100%);
box-shadow: 0px 3px 0px 0px #C63A38, 0px 2px 4px 0px rgba(255, 71, 0, 0.3);
border-radius: 4px 100px 100px 4px;

Answer 1

You could use border-radius and clip-path together to cut of edges . grid can also help you to give an average ratio for each text portions .
here within a single button, what could be done :
button {
background:none;
border:none;
display:inline-grid;
grid-template-columns:1.5fr 2fr;
font-size:1.5em;
filter:drop-shadow(1px 1px 2px gray)
}
button span {
background:linear-gradient(to right,#0099EE,#0077EE);
padding:1em 3em;
color:white;
border-radius:1.5em 7px 1.5em 1.5em / 1.5em 1em 0.5em 1.5em;
clip-path: polygon(0 0, 100% 0%, calc( 100% - 1em) 100%, 0% 100%);
box-shadow:inset 0 -2px 1px 2px #0681D3;
}
button span + span {
margin-left:-0.75em;
clip-path: polygon(1em 0, 100% 0%, 100% 100%, 0% 100%);
border-radius:1.5em 1.5em 1.5em 7px / 0.5em 1.5em 1.5em 1em;
background:linear-gradient(to right,#FD7F5A, #F53841);
box-shadow:inset 0 -2px 1px 2px #CD3C30
}
<button><span>text 1</span><span> text 2 </span></button>

Answer 2

Use clip-path
#buttonA {
display: inline-flex;
align-items: center;
justify-content: center;
width: 150px;
height: 48px;
background: linear-gradient(317deg, #0099ee 0%, #0077ee 100%);
box-shadow: 0px 3px 0px 0px #0482cc, 0px 2px 4px 0px rgba(10, 127, 238, 0.3);
border-radius: 100px 4px 4px 100px;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}
#buttonB {
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
height: 48px;
background: linear-gradient(133deg, #fd7f5a 0%, #f53841 100%);
box-shadow: 0px 3px 0px 0px #c63a38, 0px 2px 4px 0px rgba(255, 71, 0, 0.3);
border-radius: 4px 100px 100px 4px;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
<div>
<div id="buttonA">buttonA</div>
<div id="buttonB">buttonB</div>
</div>