Creating a layered button, z-index not working as expected

Note: this site isn't published so hopefully you can help without access to the page itself (I'm not the site owner). If not I may be able to get the owner to move it to password protected. 

I'm trying to create a button style like this (Figma screenshot): 

I found some CSS that should do exactly what I want (https://codepen.io/joebocock/pen/ZEWoMPb) but when I put in this code, it refuses to layer the boxes in the right order. The cream box is always on top (actual site screenshot):

I added z-index: 99 to the first button, which isn't in the example code. Without that, Squarespace treated the ::after as :onhover (cream box only appears when you hover).

Otherwise the CSS works great (colors, etc). It's just the layer order.

Here is the current CSS:

#page-section-62609597342c653695d5b87c .sqs-block-button-element {
  outline: 0;
  position: relative;
  background-color: #BF6939;
  z-index: 99;
}

#page-section-62609597342c653695d5b87c .sqs-block-button-element::after {
  content: "";
  background-color: #FAF7F3;
  border: 1px solid #BF6939;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
}

40 minutes ago, KaijuCorgi said:

Note: this site isn't published so hopefully you can help without access to the page itself (I'm not the site owner). If not I may be able to get the owner to move it to password protected. 

 

I'm trying to create a button style like this (Figma screenshot): 

I found some CSS that should do exactly what I want (https://codepen.io/joebocock/pen/ZEWoMPb) but when I put in this code, it refuses to layer the boxes in the right order. The cream box is always on top (actual site screenshot):

 

I added z-index: 99 to the first button, which isn't in the example code. Without that, Squarespace treated the ::after as :onhover (cream box only appears when you hover).

Otherwise the CSS works great (colors, etc). It's just the layer order.

Here is the current CSS:

#page-section-62609597342c653695d5b87c .sqs-block-button-element {
  outline: 0;
  position: relative;
  background-color: #BF6939;
  z-index: 99;
}

#page-section-62609597342c653695d5b87c .sqs-block-button-element::after {
  content: "";
  background-color: #FAF7F3;
  border: 1px solid #BF6939;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
}

 

It could be better if you can share the protected password so we can take a look

The site is still in trial mode so we can't publish, even privately 😕  I'll try to mock it up on another site I have access to and see if I can replicate the issue. 

Edit: @bangank36I've added a page on another site and tried to replicate it exactly. The section type, content, and CSS is the same and the button behavior is the same. 

https://pineapple-sapphire-khkb.squarespace.com/sandbox (no password)

If the site is trial, you can setup password & share url. 2 sites, will have different id, class names, so if the code works on second site, it won't work on first site.

Okay @bangank36 and @tuanphan I've got it live now. 

https://circle-triceratops.squarespace.com/
Password: jackrabbit

The section with the layered button is right above the footer.