如何制作一个3d按钮

Question

我不知道如何使用 CSS 生成使用adobe illustrator创建的此图像按钮。有没有人知道如何实现 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>

Answer 2

也可以使用 CSS 制作此形状，而不进行变换。关键是使用border technique制作倾斜的形状并给它们一个3d外观：

＆＃13;

＆＃13;

div{
  position:relative;
  display:inline-block;
  vertical-align:top;
  padding:0 6em;
  line-height:3.5em; height:3.5em;
  color:#fff;
  margin:2em 1em;
}
div:before, div:after,
span:before, span:after{
  content:'';
  position:absolute;
}
span:before{
  top:0; left:0;
  width:100%; height:0;
  box-sizing:border-box;
  border-bottom: 3.5em solid #8CC63F;
  border-right:3px solid transparent;
  border-left:3px solid transparent;
  z-index:-1;
}
span:after{
  top:100%; left:0;
  width:100%;
  box-sizing:border-box;
  border-top:1.3em solid #39B54A;
  border-right:2.5px solid transparent;
  border-left:2.5px solid transparent;
}
div:before{
  bottom:-2em;
  left:-0.6em;right:-0.6em;
  border-bottom:4.8em solid #4D4D4D;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  z-index:-2;
}
div:after{
  bottom:-2.2em;
  left:-0.6em;right:-0.6em;
  border-bottom:0.2em solid #242424;
}

＆＃13;

<div><span>Go</span></div>

＆＃13;

＆＃13;

＆＃13;