Свойство z-index позиционирует элементы по оси Z, то есть определяет, в какой последовательности происходит наложение элементов.

Так, иногда для дочернего элемента можно установить значение свойства z-index меньше чем для родительского, в результате дочерний элемент скроется за родительским элементом. Избежать такого эффекта позволяет создание нового контекста наложения (stacking context) для родительского элемента. Сделать это можно, например, добавив родителю CSS-свойство isolation: isolate.

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

Например:

button.join-now {
    cursor: pointer;
    border: none;
    outline: none;
    padding: 10px 15px;
    position: relative;
    background-color: #5dbea3;
    isolation: isolate; /* без этого свойство дочерний элемент скроется за родительским */
}

button.join-now::before {
    content: "";
    position: absolute;
    background-color: #33b249;
    top: 0;
    left: 100%;
    right: 0;
    bottom: 0;
    transition: left 500ms ease-out;
    z-index: -1;
}

button.join-now:hover::before {
    left: 0;
}

Так при наведении будет изменяться фон элемента button, не мешая тексту на переднем плане.

Спасибо за внимание.