z-index issue while transforming after pseudo-element with transition

Question

I created a following button:

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition:.5s;
  position:relative;
  color:white;
}

button:hover{
background-color:blue;
  transform:translate(5px,5px);
}

button:hover:after{
  bottom:0;
  right:0;
}

button:after{
  content: '';
  transition:.5s;
  position:absolute;
  bottom:-5px;
  right:-5px;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:blue;
}

<button>test</button>

When I hover over the button the top layer (red) appears to be going below the blue after pseudo-element. What should I change to keep the red layer on top at all times?

Temani Afif · Accepted Answer · 2019-05-16T10:00:51.487

You are having an issue because the transform is creating a stacking context moving the pseudo element inside thus it can not more be behind the main element.

I would advise you to consider something else because relying on the pseudo element behind its parent element may create issue because the pseudo element can go behind other element.

Here is a basic example if I add a background to the body where you will partially see the pseudo element because it's behind the body.

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition: .5s;
  position:relative;
  color:white;
  bottom: 0; 
  right: 0;
}

button:hover{
 bottom: -5px; 
 right: -5px;
}

button:hover:after{
  bottom:0;
  right:0;
}

button:after{
  content: '';
  transition:.5s;
  position:absolute;
  bottom:-5px;
  right:-5px;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:blue;
}

body,html {
  background:#fff;
}

<button>test</button>

Here is another idea, where you don't need pseudo element and you can use a simple box-shadow:

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition: .5s;
  color:white;
  box-shadow:5px 5px 0 blue;
}

button:hover{
  box-shadow:0px 0px 0 blue;
  transform:translate(5px,5px);
}

<button>test</button>

Another idea with pseudo element where you have to use both of them:

button{
  background-color:none;
  padding:10px 15px;
  border:none;
  transition: .5s;
  color:white;
  position:relative;
  z-index:0;
}
button:before,
button:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:red;
  z-index:-1;
}
button:before {
  background:blue;
  transform:translate(5px,5px);
  transition: .5s;
}

button:hover{
  transform:translate(5px,5px);
}
button:hover:before{
  transform:translate(0,0);
}

<button>test</button>

score 2 · Answer 2 · answered May 15 '19 at 08:24

You can animate bottom and right properties to get the effect.

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition: .5s;
  position:relative;
  color:white;
  bottom: 0; 
  right: 0;
}

button:hover{
 bottom: -5px; 
 right: -5px;
}

button:hover:after{
  bottom:0;
  right:0;
}

button:after{
  content: '';
  transition:.5s;
  position:absolute;
  bottom:-5px;
  right:-5px;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:blue;
}

<button>test</button>

z-index issue while transforming after pseudo-element with transition

2 Answers2