Как установить точку перехода фона с линейным градиентом в фиксированной позиции пикселя?

Question

Я хочу добавить стили к кнопкам bootstrap, чтобы они имели два раздела разного цвета фона.

Примерно так:

Я пробовал это:

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

Как это можно сделать?

ОБНОВЛЕНИЕ

Спасибо @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, это легче понять.