Why don't links work when I use :before / :after background URLs?

Question

I 'd like add a little background structure to my css buttons. That's what the button code looks like:

.button a {
color: white;
padding: 2% 6%;
width: 100%;
margin-top: 3%;
display: inline-block;
text-decoration:none;
background-color: #49c0f0; background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
position:relative;}

Now I user :after to add an almost transparent background image to the button:

.button a:after {
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(../images/structure.png);
opacity:0.05;}

It looks pretty nice but unfortunately all of the links before and after those buttons are not clickable anymore. I was wondering if it has something to do with the absolute / relative positioning of the surrounding items...

Answer 1

That's because .button a:after is absolutely positioned, so by default it is displayed in front of .button a.

To avoid that, you can use z-index:

.button a:after {
    z-index: -1;
}