此按钮的动态宽度和高度

Question

我正在尝试使用最少的HTML / CSS创建一个Button。我创建了按钮，但我不知道如何使按钮的宽度动态化。我目前对宽度进行了硬编码（参见下面的行）。当我尝试使用width:100p%; height:100%;时，容器维度与.btn的维度相匹配。关于我能做些什么来解决这个问题的任何想法？

另外，我可以进一步简化我的HTML / CSS吗？我不认为我可以摆脱span。

硬编码尺寸：27-28,34-35行

我的代码： https://jsfiddle.net/ye3chdr1/

我尝试创建的示例：https://cdn.css-tricks.com/wp-content/uploads/2013/10/css-button.png

Answer 1

尝试设置右侧和底部位置

.btn::before {
    top: 5px;
    left: 5px;
    background: linear-gradient(#ababab, #616161);
    bottom: 5px;
    right: 5px;
}

.btn::after {
    top: 7px;
    left: 7px;
    bottom: 7px;
    right: 7px;
    background: linear-gradient(#e0e0e0, #b0b0b0);
}