Sharp Shadowed Button

index.html

<div class="button">Title</div>

style.scss

// positioning/dimensions
$width: 100px;
$height: 0.3*$width;
.button {  

  height: $height;
  width: $width;

  // center the content  
  display: flex;
  justify-content: center;
  align-items: center;
  
  transition: all 0.5s;
  position: relative;
  
  // I think it's arbitrary, but this works well
  perspective: $width;
  
  &:after {
    content: "";
    // transform does not apply to inline elements
    display: block;
    
    transition: all 0.5s;

    height: 100%;
    width: 100%;
    
    // don't block anything 
    position: absolute;
    top: 0;
    left: 0;
    
    // do the thing
    transform: rotateX(120deg) scaleY(0.5);
    transform-origin: bottom center;
  }

  &:hover:after {
    // do the thing _longer_
    transform: rotateX(120deg) scaleY(1);
  }
}


// colors 
$primary: white;
$secondary: red;
$tertiary: black;
.button {
  background-color: $secondary;
  .text {
    color: $primary;
  }
  &:after {
    background-color: $tertiary;
  }
  
  &:hover {
    background-color: lighten($secondary, 15%);
    &:after {
      background-color: darken($tertiary, 25%);      
    }
  }
}