"Responsive" buttons with ::before and ::after shape - html

Question

By responsive I mean that they still look good with slightly longer text and don't have fixed width.
I am trying to make buttons that look exactly like in image below, but I can't get them to be the right width. I thought adding padding on left and right side would do it, but that doesn't work with the "ADD" button. My task is to convert a .psd to html/css pixel perfect which is kind of dumb and results in bad code.
Fiddle: https://jsfiddle.net/emils/9g7cn7eh/
Buttons:
Button:
<div class="btn-container">
<button class="action-btn" type="submit">Add</button>
</div>
Styling:
.btn-container {
position: relative;
padding-bottom: 20px;
}
.action-btn {
padding: 4px 9px 4px 20px;
color: #f5f8f9;
font-size: 0.9375em;
letter-spacing: 0.4px;
text-transform: uppercase;
background-color: #aecacc;
border: 0;
}
.action-btn:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
margin-left: -20px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 7px solid #f4f4f4;
}
.action-btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
margin-left: 8px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 15px solid #aecacc;
}

Answer 1

Add position: relative to the buttons, and use right/left to move the pseudo elements.
JSfiddle: link
.btn-container {
position: relative;
padding-bottom: 20px;
}
.action-btn {
padding: 4px 9px 4px 20px;
color: #f5f8f9;
font-size: 0.9375em;
letter-spacing: 0.4px;
text-transform: uppercase;
background-color: #aecacc;
border: 0;
position: relative; /* we need this for the pseudo elements positioning */
}
.action-btn:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
/*margin-left: -20px;*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 7px solid #f4f4f4;
}
.action-btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -15px;
/*margin-left: 8px;*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #aecacc;
}
<div class="btn-container">
<button class="action-btn" type="submit">Add</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">View Basket</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">View All (15)</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">Checkout</button>
</div>