Z-index не работает должным образом, интересно, в чем причина проблемы ⇐ CSS

[Anonymous]

Я пытаюсь создать рамку вокруг кнопки. Эта граница должна быть градиентной, поэтому я просто пытаюсь сделать кнопку большего размера без функциональности под кнопкой выше. По какой-то причине, что бы я ни делал, они не будут располагаться так, как я хочу.
Код ниже:

Код: Выделить всё

.knap{
width: 250px;
height: 50px;
border-radius: 200px;
align-content: center;
background-color: #161a20;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 17px;
position: relative;

display: flex;
justify-content: center;
align-items: center;
}

.knap::after{
content: '';
position: absolute;
height: 105%;
width: 105%;
border-radius: 200px;
background-image: linear-gradient(to bottom left, #008cff, #e100ff);
z-index: -1;
}

.wrap{
display: flex;
justify-content: center;
align-items: center;
}

#b1{

margin-top: 50px;
z-index: 100;

}






About me

Я пробовал изменить z-индекс, я также пытался возиться с div-оберткой, но ничего не помогло.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -the-issue