problema css sfondo tra due elementi

[il-berta]

ho questo problema. ho un div"content" contenente un button. se ha al div"content" assegno un background, il background del button diventa del colore assegnato al content nonostante abbia un'altro colore. se invece non metto nessuno background, il bottone torna a essere del suo colore normale. come faccio a superare questo problema?

HTML

<div id="content">
<div id="box_nav">
<a href="camere.html"><button class="btn btn-1 btn-1b">camere</button></a>
</div>
</div>


CSS

#content{
width: 960px;
height: auto;
min-height: 100%;

}



/* General button style (reset) */
.btn {
border: none;
font-family: 'Quicksand', helvetica, sans-serif;
font-size: inherit;
color: inherit;
background:none;
cursor: pointer;
padding: 25px 25px;
margin: 2px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}


.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}


/* Button 1 */
.btn-1 {
border: 3px solid #241B18;
color: #241B18;
}
/* Button 1b */
.btn-1b:after {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #241B18;
}


.btn-1b:hover,
.btn-1b:active {
color: rgba(219,127,8, 1);
}


.btn-1b:hover:after,
.btn-1b:active:after {
height: 100%;
}

[HendrixLive]

Ciao, ti sei reso conto che hai utilizzato 35 classi per un semplice bottone? Cioè non si capisce neanche bene cosa ti serve sapere, metti qualche screen perchè quel codice è illeggibile.

A presto.

[Prill]

Inserisci lo sfondo nella classe .btn, attualmente è in btn:after che ha posizionamento assoluto e z-index negativo, quindi di fatto si colloca dietro al div content (che perciò lo copre). Se invece hai più bottoni con sfondo diverso, e non puoi impostarlo in btn, dovrai modificare lo z-index. Se le modifiche creano altri problemi, sarà necessario vedere una pagina di esempio