Span's pseudo-elements overlay the element itself - css

Question

I'm stuck with CSS pseudo-elements :before and :after when I was trying to stylize button's background. The problem is this: when I'm using only positive z-indices to place span itself and its pseudo-elements in right order, :before and :after are always overlapping the element. When I'm using negative z-indices, it's all right, but I don't want to change other underlying elements' z-indices just to make the button working.
So that's the problem and that's the goal to be achieved except the negative z-indices.
Problem code:
.button {
display: inline-block;
z-index:3;
position: relative;
left: 25px;
top: 25px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
background: rgba(85,85,90, .7);
padding: 10px;
left: -10px;
top: -10px;
}
.button:after {
content: "";
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
background: rgba(85,85,90, .4);
padding: 20px;
left: -20px;
top: -20px;
}

Answer 1

go for borders ! :)
http://jsfiddle.net/RwGV9/1/
basically
border:solid 10px rgba(85,85,90, .7);
left: -10px;
top: -10px;
and same thing for the other one with the right left, top and padding !

Answer 2

if you don't mind putting attributes in your html, you could do like that :
http://jsfiddle.net/RwGV9/
in the HTML :
<span data-text='button !' class="button">button</span>
and in the CSS :
.button:before {
content: attr(data-text);
Basically put the text in the highest layer using button using content: attr(); and make you text disappear in the deepest one (bg color = type color is not very elegant but it keeps the text of the button selectable for the user !)

Answer 3

http://jsfiddle.net/D8gDK/
.button {
display: inline-block;
position: relative;
left: 25px;
top: 25px;
width: 100px;
height: 60px;
padding-left: 20px;
padding-right: 20px;
background: rgb(96,96,100);
border: 1px solid #202020;
color: #dddddd;
}
.button:before {
content: "";
display: block;
width: 140px;
height: 60px;
position: relative;
background: rgba(85,85,90, .7);
border: 10px solid rgba(85,85,90, .4);
padding: 10px;
left: -40px;
top: -20px;
}
I got rid of the second pseudo element and put the before behind the button.
Might need some work with the colors...
Works only if you know the width of the button, though