[CSS] Interchange background of an element

z-index property arranges how an element is stacked onto other positioned elements. At times you may set a z-index property on a child element to be lower and it ends up hiding behind the background of its parent. To prevent this, you can cause a new stacking context on the parent element to prevent child elements from going behind it. One way way to create a stacking context is to use isolation: isolate css style declaration.

We can use this stacking context technique to create hover effect that interchanges a button's background. For example:

button.join-now {
    cursor: pointer;
    border: none;
    outline: none;
    padding: 10px 15px;

    position: relative;
    background-color: #5dbea3;
    isolation: isolate; /* If ommitted, child pseudo element will be stacked behind */
}

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;
}

Read more: https://dev.to/smitterhane/13-css-tricks-that-will-give-you-an-adrenaline-rush-5908