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%;
}