如何在固定像素位置设置线性渐变背景的过渡点？

Question

我想为自举按钮添加样式，以使它们具有两个不同背景色的部分。

类似这样的东西：

我已经尝试过：

.btn{
    background-image: linear-gradient(-90deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 30%);
}

但是我不能使用％来设置颜色之间的过渡位置，因为那样会发生这种情况：

我需要一种以固定像素数设置它的方法。

这不起作用：

.btn{
    background-image: linear-gradient(-90deg, rgba(0,0,0,0), rgba(0,0,0,.3) 32px);
}

怎么办？

UPDATE

感谢@AmauryHanser提供的解决方案（我离我们并不遥远！;）），我已经将其改进为我认为是一些非常漂亮的按钮，并使代码非常整洁易读：

css：

.btn {
    background-image: linear-gradient(90deg, rgba(0,0,0,.4) 36px, rgba(0,0,0,0) 36px);
    padding-left:0px;
}

.fas {
    margin-left: 8px;
    margin-right: 10px;
    color: rgba(255,255,255,.8);
}

html：

<a href="#" class="btn btn-primary">
    <span class="fas fa-arrow-circle-left fa-fw"></span>
    Avslutt uten å lagre
</a>
<button type="submit" class="btn btn-success">
    <span class="fas fa-save fa-fw"></span>
    Lagre
</button>

结果：

注意fa-fw的使用，这是设置FontAwesome图标的固定宽度。为了使文本从所有按钮上的相同像素位置开始，这是必要的。

Answer 1

您可以在线性渐变定义中使用像素

.btn{
    display: inline-block;
    background-image: linear-gradient(to right, rgba(0,0,0,0) 40px, rgba(0,0,0,.3) 40px);
}

<a class="btn">ICON Text</a>

您会发现我使用了to right而不是-90deg，这更容易理解。