水平六角形按鈕CSS

Question

我如何才能使這個按鈕的innerHTML不隱藏在這些顏色的后面。 因為現在就像在幕后一樣，如果我更改按鈕的顏色和不透明度，我將看不到背后的文字。

  body .btn-main { position: relative; display: block; background: transparent; width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 15px; text-decoration: none; text-transform: uppercase; margin: 40px auto; cursor: pointer; color: black; } body .btn-main span { z-index: 100; } body .btn-main:before, body .btn-main:after { width: 200px; left: 0px; height: 27px; z-index: 1; } body .btn-main:after { position: absolute; top: 34px; opacity: 0.4; background: #5E3553; content: ''; border-top: none; -webkit-transform: perspective(15px) rotateX(-5deg); -moz-transform: perspective(15px) rotateX(-5deg); transform: perspective(15px) rotateX(-5deg); } body .btn-main:before { position: absolute; content: ''; opacity: 0.6; background: #5E3553; border-bottom: none; -webkit-transform: perspective(15px) rotateX(5deg); -moz-transform: perspective(15px) rotateX(5deg); transform: perspective(15px) rotateX(5deg); } body .btn-main:before, body .btn-main:after { z-index: -1; border: 2px solid #5E3553; } body .main-img { background-image: url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #464646; height: 1000px; } 

 <div class="main-img"> <div class="button btn-main"><span>Trial Now!</span></div> </div> 

Answer 1

只需將z-index: 1更改為z-index: -1 。 就這樣。

---

編輯：將代碼段更新為OP的新代碼段。 現在它包括一個背景。

我給了背景一個z-index: -1 ，按鈕z-index: 0和文本z-index: 1 ， position: absolute 。

 body .btn-main { position: relative; display: block; background: transparent; width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 15px; text-decoration: none; text-transform: uppercase; margin: 40px auto; cursor: pointer; color: black; } body .btn-main span { left: 30%; position: absolute; z-index: 1; } body .btn-main:before, body .btn-main:after { width: 200px; left: 0px; height: 27px; z-index: 0; } body .btn-main:after { position: absolute; top: 34px; opacity: 0.4; background: #5E3553; content: ''; border-top: none; -webkit-transform: perspective(15px) rotateX(-5deg); -moz-transform: perspective(15px) rotateX(-5deg); transform: perspective(15px) rotateX(-5deg); } body .btn-main:before { position: absolute; content: ''; opacity: 0.6; background: #5E3553; border-bottom: none; -webkit-transform: perspective(15px) rotateX(5deg); -moz-transform: perspective(15px) rotateX(5deg); transform: perspective(15px) rotateX(5deg); } body .btn-main:before, body .btn-main:after { border: 2px solid #5E3553; } body .main-img { background-image: url(https://static.pexels.com/photos/4827/nature-forest-trees-fog.jpeg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #464646; height: 1000px; } 

 <div class="main-img"> <div class="button btn-main"><span>Trial Now!</span> </div> </div> 

Answer 2

我們可以在其中添加以下樣式的內部跨度：

.btn-main span {position: absolute; width:100%; left:50%; margin-left:-50%; z-index:2;}

演示如下例所示：

 body{background:black} body .btn-main { position: relative; display: block; background: transparent; width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 15px; text-decoration: none; text-transform: uppercase; margin: 40px auto; cursor: pointer; color: white; } .btn-main span {position: absolute; width:100%; left:50%; margin-left:-50%; z-index:2;} body .btn-main:before, body .btn-main:after { width: 200px; left: 0px; height: 27px; z-index: 1; } body .btn-main:after { position: absolute; top: 34px; opacity: 0.4; background: #5E3553; content: ''; border-top: none; -webkit-transform: perspective(15px) rotateX(-5deg); -moz-transform: perspective(15px) rotateX(-5deg); transform: perspective(15px) rotateX(-5deg); } body .btn-main:before { position: absolute; content: ''; opacity: 0.6; background: #5E3553; border-bottom: none; -webkit-transform: perspective(15px) rotateX(5deg); -moz-transform: perspective(15px) rotateX(5deg); transform: perspective(15px) rotateX(5deg); } body .btn-main:before, body .btn-main:after { border: 2px solid #5E3553; } 

 <div class="button btn-main"><span>test</span></div> 

Answer 3

可能是您需要按鈕的css屬性-背景：rgba（0，0，0，0.2）; RGBA可以設置背景色的不透明度