button.css

/**
 * Variable declarations
 */
 $btn-color: $play-btn-color; 
 $btn-size : 45px;
 $duration : 300ms;
 $easing   : cubic-bezier(0, 0, .2, 1);
 $half-size: ($btn-size / 2);
 
 /**
  * Initial set-up
  */
 *,
 *:before,
 *:after {
   
   box-sizing: border-box;
   
 }
 
 /**
  * The actual play button
  */
 .play-btn {
   
   /** Sizing */
   width       : $btn-size;
   height      : $btn-size;
   
   /** Border styling */
   border-style: solid;
   border-color: transparent $btn-color transparent $btn-color;
   border-width: $half-size 0 $half-size $btn-size;

   cursor: pointer;
 
   
   &.stop,
   &.to-play {
       
     /** Animate morphing */
     transition  : transform           $duration $easing,
                   border-top-width    $duration $easing,
                   border-bottom-width $duration $easing,
                   left  $duration $easing;
   
   }
   
   &.stop {
       
     /** Morph to a stop button */
     transform   : rotate(90deg);
     border-width: 0 0 0 $btn-size;
     
   }
   
   &.to-play {
     
     /** Morph back from a stop button to a play button */
     transform   : rotate(180deg);
     border-width: $half-size $btn-size $half-size 0;
     
   }
   
 }