CSS Stacking:- :: Перед псевдоэлементом (кнопка) появляется выше содержимого на Hover [Duplicate] ⇐ Html

[Anonymous]

На Hover кнопки показывают конический фон градиента, который я установил на кнопку :: Перед < /code>, чтобы принести этот эффект сияния для каждой кнопки.
Image < /p>

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

 .button-class{
background-color: #0f0f2c;
box-shadow: 0 0 3px #ff00cc;
border: none;
border-radius: 8px;
cursor: pointer;

position: relative;

}

.button-class:hover {
transform: scale(1.05);

}
.button-class::before{
content: "";
position: absolute;
inset: -1px;
box-shadow: 0 0 2px #333399,
0 0 2px #ff00cc,
0 0 1px #fffb00,
0 0 2px #00f0ff,
0 0 15px #333399;
background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
background-color: #f0c0ff;
border-radius: 22px;
z-index: -1;
}

Как это исправить?

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-on-hover