How to make a 3d button

Question

I've got no idea how to generate this image button created with adobe illustrator with CSS. Does anyone have an idea of how this 3d button can be achieved?

Answer 1

Using CSS:

You can do this with CSS using rotate transform with a bit of perspective added to it.

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>

If the area that contains the text also needs to angled a bit , then an extra container is required.

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>

---

Using SVG:

This can be created with SVG also using a few polygon or path elements and positioning the SVG absolutely behind the button with respect to the container.

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

It is also possible to make this shape using CSS and no transforms. The point is to use the border technique to make the slanted shapes and give them a 3d look:

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

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