I am creating a simple CSS Button and having issues with its z-index.
My Code:
body { /* Ignore Body Styling */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button {
padding: 0.7em 1em;
font-size: 25px;
text-transform: uppercase;
font-weight: 600;
border: 5px solid #191919;
border-radius: 0;
background-color: rebeccapurple;
color: #fff;
position: relative;
}
button:hover {
cursor: pointer;
transform: translate(-10px, -10px);
}
button::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgb(147, 103, 190);
}
button:hover::before {
transform: translate(15px, 15px);
z-index: -1;
}
<button>Click Me</button>
Just run the code once and you will understand.
While :hover
, I don't want the ::before
to cover over my main element (<button>
)
Thank You!
CodePudding user response:
Just to suggest an alternative approach, you could play with box shadows to create the effect without creating a pseudo-element.
body {
height: 80vh;
display: grid;
place-items: center;
}
button {
font-size: 1rem;
transition: all 0.2s;
color: white;
padding: 0.5em 1em;
text-transform: uppercase;
background-color: rebeccapurple;
border: 3px solid black;
position: relative;
box-shadow: 5px 5px 0px 0px orchid;
-webkit-box-shadow: 5px 5px 0px 0px orchid;
-moz-box-shadow: 5px 5px 0px 0px orchid;
}
button:hover {
cursor: pointer;
transform: translate(-5px, -5px);
box-shadow: 12px 12px 0px 0px orchid;
-webkit-box-shadow: 12px 12px 0px 0px orchid;
-moz-box-shadow: 12px 12px 0px 0px orchid;
}
<button>Click Me</button>
CodePudding user response:
Transforming an element alters the stacking context.
Instead of a translate you could move the element with negative margins.
UPDATE: and compensate for this (so that the following content doesn't move) by adding margin to right and bottom on hover while taking it away at the top and left.
body {
/* Ignore Body Styling */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button {
padding: 0.7em 1em;
font-size: 25px;
text-transform: uppercase;
font-weight: 600;
border: 5px solid #191919;
border-radius: 0;
background-color: rebeccapurple;
color: #fff;
position: relative;
}
button:hover {
cursor: pointer;
margin-top: -10px;
margin-left: -10px;
margin-bottom: 10px;
margin-right: 10px;
}
button::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgb(147, 103, 190);
}
button:hover::before {
transform: translate(15px, 15px);
z-index: -1;
}
<button>Click Me</button>
CodePudding user response:
code issues top: 2px; left: 2px;
<style>
body { /* Ignore Body Styling */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button {
padding: 0.7em 1em;
font-size: 25px;
text-transform: uppercase;
font-weight: 600;
border: 5px solid #191919;
border-radius: 0;
background-color: rebeccapurple;
color: #fff;
position: relative;
}
button:hover {
cursor: pointer;
transform: translate(-10px, -10px);
}
button::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgb(147, 103, 190);
}
</style>
<button>Click Me</button>