3D button

by Jernej Slejko

HTML

<div class="container">
  <button><span></span></button>
</div>

SCSS

.container {
  padding: 50px;
  background: #6076C5;
  height: 200px;
  max-height: 200px;
}

$width: 40px;
$height: 30px;

button {
  background: linear-gradient(to right, #a90329 0%,#8f0222 44%,#6d0019 100%); 
  width: $width;
  height: $height;
  position: relative;
  border: none;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    width: $width;
    height: 30%;
    border-radius: 100%;
    left: 0;
  }
  
  &:before {
    background: darkred;
    top: -15%;
  }
  
  &:after {
    background: linear-gradient(to right, #a90329 0%,#8f0222 44%,#6d0019 100%); 
    bottom: -15%;
  }
  
  span {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 88%);
    background: linear-gradient(to right, #565656 0%,#93959e 15%,#cdced3 35%,#9596a0 57%,#727272 86%,#474747 100%);
    width: $width / 2;
    height: $height;
    
    &:before {
      content: '';
      position: absolute;
      height: 30%;
      width: $width / 2;
      border-radius: 100%;
      left: 50%;
      bottom: 1px;
      transform: translate(-50%, 50%);
      background: linear-gradient(to right, #565656 0%,#93959e 15%,#cdced3 35%,#9596a0 57%,#727272 86%,#474747 100%);
      box-shadow: 0px 7px 5px 4px rgba(black, .3);
    }
  }
  
  &:focus,
  &:hover {
    margin-top: 5px;
    span {
      height: calc(#{$height} - 5px);
      &:before{
        box-shadow: 0px 7px 4px 4px rgba(black, .4);
      }
    }
  }

  &:active {
    margin-top: 20px;
    span {
      height: calc(#{$height} - 20px);
      &:before{
        box-shadow: 0px 7px 3px 6px rgba(black, .4);
      }
    }
  }

}