HTML & CSS Issue
<button>Get Postion</button>Below is the CSS code for styling a button:
button {
padding: 1rem;
background-color: red;
color: wheat;
border: 4px solid yellowgreen;
position: relative;
cursor: pointer;
}
button::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
height: calc(100% + 8px);
width: calc(100% + 8px);
background-color: yellow;
z-index: -1;
}
The issue reported is that 'z-index' property is not working as expected and the '::before' pseudo-element takes the button's borders.