按钮CSS转换在DIV内不起作用

Question

好吗？我在CSS上遇到问题。一切工作完美，直到我把代码放入另一个div，并且背景不透明。请看下面的例子：

body { 
 
    background: #2ecc71; 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
#bg{ 
 
    background: #000; 
 
} 
 
.container-button { 
 
    padding: 10em; 
 
    margin: 0 auto; 
 
    width: 1170px; 
 
    text-align: center; 
 
    display: block; 
 
    overflow: hidden; 
 
} 
 

 
/* GENERAL BUTTON STYLING */ 
 
.btn-more-info{ 
 
    display:block; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.btn-more-info a, 
 
.btn-more-info a::after { 
 
    -webkit-transition: all 0.3s; 
 
\t -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
\t transition: all 0.3s; 
 
    test-ident: -9999px; 
 
    text-decoration: none; 
 
} 
 

 
.btn-more-info a { 
 
    background: none; 
 
    border: 2px solid #fff; 
 
    border-radius: 5px; 
 
    color: #fff; 
 
    display: block; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    padding: 20px 50px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-more-info a::before, 
 
.btn-more-info a::after { 
 
    background: #fff; 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.btn-more-info a:hover { 
 
    color: #2ecc71; 
 
} 
 

 
/* BUTTON EFFECT */ 
 
.btn-effect { 
 
    overflow: hidden; 
 
} 
 

 
.btn-effect::after { 
 
    /*background-color: #f00;*/ 
 
    height: 100%; 
 
    left: -35%; 
 
    top: 0; 
 
    transform: skew(50deg); 
 
    transition-duration: 0.6s; 
 
    transform-origin: top left; 
 
    width: 0; 
 
} 
 

 
.btn-effect:hover:after { 
 
    height: 100%; 
 
    width: 135%; 
 
} 
 

 

 

 

 

 

 
.btn-send{ 
 
    overflow: hidden; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 
.btn-send a, 
 
.btn-send a::after { 
 
    -webkit-transition: all 0.3s; 
 
\t -moz-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
\t transition: all 0.3s; 
 
    test-ident: -9999px; 
 
    text-decoration: none; 
 
} 
 

 
.btn-send a { 
 
    background: none; 
 
    border: 2px solid #353B4C; 
 
    border-radius: 5px; 
 
    color: #353B4C; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    padding: 20px 50px; 
 
    position: relative; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-send a::before, 
 
.btn-send a::after { 
 
    background: #353B4C; 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.btn-send a:hover { 
 
    color: #FFF; 
 
}

<div id="bg"> 
 
<div class="container-button"> 
 
    <div class="btn-more-info"> 
 
    <a href="" class="btn-effect">Continue lendo</a> 
 
    </div> 
 
    <div class="btn-send"> 
 
    <a href="" class="btn-effect">Enviar mensagem</a> 
 
    </div> 
 
</div> 
 
</div>

你看，如果你删除ID = “BG” 影响正常工作。 任何人都可以帮助我吗？

谢谢你！

Answer 1

问题出在：before和之后的z-index上。

试试这个：

.btn-more-info a::before, 
.btn-more-info a::after { 
    background: #fff; 
    content: ''; 
    position: absolute; 
    z-index: 0; 
} 

还会增加按钮内部的文本的z-index。