Как наложить друг на друга два элемента с ::before?

Question

[derasoft]

У меня есть два элемента с градиентной рамкой, выполненной посредством большого прямоугольника в ::before, залитого градиентным фоном.

.visual_block_2 {
    width: 100%;
    background: #480572;
    border-radius: 40px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    margin: 10px 0px;
    padding: 30px 10px;
}
.visual_block_2::before {
    border-radius: 40px;
    content: '';
    background-image: linear-gradient(-45deg, #9400FF, #C64F87);
    padding: 2px;
    width: 100%;
    height:100%;
    top: -2px;
    left: -2px;
    position:absolute;
    z-index:-2;
}
.button_1 {
    width: 100%;
    background-color: #1E0044;
    border-radius: 10px;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    margin: 10px 0px;
    color: white;
    padding: 0.5em;
    border-width: 0px;
    /* z-index: -2; */
}
.button_1::before {
    border-radius: 10px;
    content: '';
    background-image: linear-gradient(90deg, #383FEC, #23FFFF);
    padding: 2px;
    width: 100%;
    height:100%;
    top: -2px;
    left: -2px;
    position:absolute;
    z-index: -1;
}

<div class="visual_block_2">
        <button class="button_1">Оставить заявку</button>
</div>

При попытке наложить их друг на друга, объект "button1::before" пропадает, если он находится за пределами visual_block_2, то всё в порядке:

Предполагаю, что проблема где-то в z-index'ах абсолютно позиционированных эллементов, но я понятия не имею как эту проблему решить.

Answer 1

[Ankhena]

Сначала нужно узнать, зачем для этого два элемента div и button. Достаточно одной кнопки. Если что, у неё есть два псевдо. В вашем случае не видно зачем второй псевдо.

Но в современном мире эта задача легко решается вообще без псевдо с помощью background-origin
https://sitist.ru/gradient-border.html

Comments

[derasoft]

Изначально div это подложка для формы, у которой тоже есть гардиентрная рамка, так что он тут нужен. предложенное решение опробую в ближайшее время.

[Ankhena]

derasoft, всё страньше и страньше ©️

У самой формы псевдиков нет чтоль?

[derasoft]

Ankhena, скажем так - у меня пока практически никакой опыт вёрстки, и поэтому в принципе о существовании псевдоэлементов я узнал в тот момент, когда мне понадобилось сделать круглые градиентные рамки для элементов, а о способ делать их через ::before я узнал со StackOverflow, и не имел понятия что это можно было сделать более удобным способом.
Ну и да, я таки попробовал предложенный вами способ, это именно то, что мне и было нужно, пойду переделывать свои элементы с рамками...

[Ankhena]

derasoft, всё получится. Приходите ещё.