如何制作一个3d按钮

Question

我不知道如何生成这个用adobe illustrator用CSS创建的图像按钮.有没有人知道如何实现这个3D按钮？

Answer 1

使用CSS:

你可以使用CSS转换,并添加一些透视图.

button {
  position: relative;
  background: yellowgreen;
  border: none;
  height: 60px;
  line-height: 1.5em;
  min-width: 200px;
  margin: 20px;
}
button:after {
  position: absolute;
  content: '';
  height: 30%;
  width: 100%;
  bottom: -30%;
  left: 0;
  background: green;
  transform: perspective(10px) rotateX(-2.5deg);
  transform-origin: top;
}
button:before {
  position: absolute;
  content: '';
  height: 120%;
  width: 110%;
  bottom: -40%;
  left: -5%;
  background: #444;
  transform: perspective(20px) rotateX(1deg);
  transform-origin: bottom;
  z-index: -1;
}

<button>Test button</button>

<button>Test button wide</button>

<button>Test button <br> with line break</button>

如果包含文本的区域也需要倾斜一点,则需要一个额外的容器.

div{
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 20px;
  height: 60px;
  min-width: 200px;
}
button {
  position: absolute;
  border: none;
  background: transparent;
  height: 100%;
  width: 100%;
  line-height: 1.5em;
  }
div:after{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: yellowgreen;
  transform: perspective(10px) rotateX(.5deg);
  transform-origin: bottom;
  z-index: -1;
}
div:before {
  position: absolute;
  content: '';
  height: 120%;
  width: 110%;
  bottom: -40%;
  left: -5%;
  background: #444;
  transform: perspective(20px) rotateX(1deg);
  transform-origin: bottom;
  z-index: -2;
}
button:after {
  position: absolute;
  content: '';
  height: 30%;
  width: 100%;
  bottom: -30%;
  left: 0;
  background: green;
  transform: perspective(10px) rotateX(-2.5deg);
  transform-origin: top;
}

<div><button>Test button</button></div>

<div><button>Test button wide</button></div>

<div><button>Test button <br> with line break</button></div>

使用SVG:

这可以使用SVG创建,也可以使用一些polygon或path元素,并将SVG完全定位在相对于容器的按钮后面.

div {
  position: relative;
  display: inline-block;
  height: 80px;
  min-width: 250px;
  margin: 20px;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
button {
  position: absolute;
  border: none;
  width: 100%;
  height: 75%;
  background: transparent;
  line-height: 1.5em;
  text-align: center;
}
#bg {
  fill: #444;
}
#fg {
  fill: yellowgreen;
}
#shade {
  fill: green;
}

<div>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <polygon points='5,100 12,20 88,20 95,100' id='bg' />
    <polygon points='15,0 85,0 88,70 12,70' id='fg' />
    <polygon points='88,70 12,70 17,85 83,85' id='shade' />
  </svg>
  <button>Test button</button>
</div>

<div>
   <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <polygon points='5,100 12,20 88,20 95,100' id='bg' />
    <polygon points='15,0 85,0 88,70 12,70' id='fg' />
    <polygon points='88,70 12,70 17,85 83,85' id='shade' />
  </svg>
  <button>Test button wide</button>
</div>

<div>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <polygon points='5,100 12,20 88,20 95,100' id='bg' />
    <polygon points='15,0 85,0 88,70 12,70' id='fg' />
    <polygon points='88,70 12,70 17,85 83,85' id='shade' />
  </svg>
  <button>Test button
    <br>with line break</button>
</div>