CODEWITHSUNDEEP
cssbuttoncss-selectorspseudo-element
Merc
Merc

Reputation: 4570

Button styling with ::after pseudo element

I am trying to style button like this: Button with two layers

Now I first though I could just style it with an ::after element attached to the button.

Currently I have this (using sass syntax):

button {
    min-width: 230px;
    border: 1px solid green;
    background-color: white;
    padding: 25px;
    display: block;
    position: relative;
    z-index: 10;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 10px;
      left: 10px;
      width: 100%;
      height: 100%;
      border: 1px solid green;
      background-color: white;
      z-index: -2;

    }
}

But this renders something which looks a little different:enter image description here

The rectangle more to the right is my :afterelement. It is indeed behind the text «Button» (without the z-Index it would just be in front), but it does not go behind the other rectangle.

How could I style this correctly?

Thanks for the help

Cheers

Upvotes: 1

Views: 6880

Answers (2)

Aloha
Aloha

Reputation: 68

I have added a few little things to the code. but this seems to work for me. There might be a simpler way, but the flip, flip works. :)

button {
  min-width: 230px;
  border: 1px solid green;
  background-color: white;
  padding: 25px;
  display: block;
  position: relative; 
  left: 20px;
   z-index: 10;  
  transform: rotateY(180deg);
}

button::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: white;
  z-index: -1;
  
}
.buttonz{
   transform: rotateY(180deg);
}
   
<button>
<div class="buttonz">
  Button
</div>

</button>

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 192317

Remove the z-index: 10 from the button. When the parent element (button in this case) have a z-index value it becomes the root element of the stacking context, and you can't move the child under it.

You can read more about stacking context and stacking order in the great article What No One Told You About Z-Index.

button {
  min-width: 230px;
  border: 1px solid green;
  background-color: white;
  padding: 25px;
  display: block;
  position: relative;
}

button::after {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: white;
  z-index: -1;
}

body {
  padding: 20px;
}
<button>Button</button>

Upvotes: 2

Related Questions