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

Question

[Torcher]

Есть центрирующий контейнер заданной ширины и абсолютно спозиционированная кнопка, которая выступает за ширину контейнера. Если ей задать линейный градиент - то та часть, которая выступает за границы контейнера, закрашивается сплошным цветом без градиента, в итоге получается полоса. Как можно от этого избавиться?

Comments

[Сергей delphinpro]

код в студию.

Answer 1

[fbi_agent26]

поставить примерно вот такой CSS -webkit-box-shadow: 4px 0px 20px 0px rgb(0 174 239);

Comments

[Torcher]

Так это снаружи будет тень, мне нужна внутренняя заливка. Суть - при наведении фон кнопки выделяется градиентным цветом

[fbi_agent26]

Torcher, даже дети в школе знают такое простое...
-webkit-box-shadow: inset 4px 0px 20px 0px rgb(0 174 239);
Только не спрашивай как ровнять толщину, как менять цвет и как сделать чтобы это работало только при наведении, потому что там явно прописана и толщина и цвет, а как сделать стиль активным при наведении - в гугле написано

[fbi_agent26]

Torcher, а цвет кнопки не через тень меняется если что, а вот так background-image: linear-gradient(60deg, #ad4fb2ab 10%, #c636a263 50%, #ffffff45 100%);
псевдокласс наведения сам уже напишешь