水平六角形按鈕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屬性的button - background：rgba（0，0，0，0.2）; RGBA可以設置背景顏色的不透明度