Getting :after styling to display behind element - html

Question

I am having trouble getting my pseudo element to show up behind the parent element. I am trying to create a button that looks like this:
however I can't figure out how to get the brown to display behind the button. All I'm getting is this:
My styling is:
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 10px;
border:1px solid white;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
background-color: $orange;
left: -2px;
bottom: 2px;
border-radius: 10px;
z-index:1;
}

Answer 1

I would just turn your css around and give the background to the button and not the after element, and you should be good.
http://jsfiddle.net/zt4yufx0/28/
body{
background:black;
}
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: transparent;
border-radius: 3px;
border-color: transparent;
background-color: #aa7936;
z-index: 5;
padding: 7px 15px 3px 25px;
}
.orangeBorderedButton:after{
position: absolute;
border:1px solid white;
height: 100%;
content: '';
width: 100%;
left: 5px;
bottom: -5px;
border-radius: 3px;
z-index:-5;
}
<a data-sr>
<button class="button large orangeBorderedButton">See All</button>
</a>

Answer 2

Use background color in button CSS and give border to :after, See this code
.orangeBorderedButton{
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
position: relative;
margin:10px 25px;
background-color: #aa7936;
border-radius: 10px;
border: 0px;
z-index: 3;
}
.orangeBorderedButton:after{
position: absolute;
height: 100%;
content: '';
width: 100%;
border:1px solid white;
left: 2px;
top: 2px;
border-radius: 10px;
z-index: 4;
}