水平六角形按钮css

Question

我怎么能让这个按钮的innerHTML不隐藏在这些颜色后面。因为现在它就像在幕后一样，如果我改变了按钮的颜色和不透明度，我看不到后面的文字。（用图片更新）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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属性 - background：rgba（0,0,0,0.2）; RGBA可以为背景颜色设置不透明度