带有:: before和:: after形状的“响应”按钮

Question

通过响应，我的意思是它们看起来仍然很好，文字略长，并且没有固定的宽度。

我正在尝试制作看起来与下图中完全相同的按钮，但我不能让它们成为正确的宽度。我认为在左侧和右侧添加填充会执行此操作，但这不适用于“添加”按钮。我的任务是将.psd转换为完美的html / css像素，这有点愚蠢，导致代码错误。

小提琴：https://jsfiddle.net/emils/9g7cn7eh/

按钮：

按钮：

<div class="btn-container">
  <button class="action-btn" type="submit">Add</button>
</div>

样式：

.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

将position: relative添加到按钮，然后使用right / left移动伪元素。
JSfiddle：link

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;