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