<!-- Inspired by Denislav Jeliazkov: https://dribbble.com/shots/3321026-Send-Micro-Interactions-Free-Principle-File -->

<div class="container">
  
  
  <div class="button-container">
    <button class="send-button js-send-button">
    </button>
  </div>
   
</div>

$body-bg-color: #fbfbfb;

$button-primary-color: #d31df4;
$button-secondary-color: #fbfbfb;
$button-height: 45px;
$button-width: 100%;
$button-border-size: 4px;


body {
  height: 100%;
  width: 100%;
  margin: 0;
  background: $body-bg-color;
}

.container {
  max-width: 350px;
  margin: 150px auto;
}

@mixin absolute-center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.button-container {
  position: relative;
}

.send-button {
  width: 100%;
  height: $button-height;
  border-radius: $button-height;
  margin: 0 auto;
  background-color: $button-primary-color;
  font-size: 1rem;
  font-weight: 700;
  border: $button-border-size solid $button-primary-color;
  transition: all 0.3s ease;
  cursor: pointer;
  position:absolute;
  bottom: 0;
  overflow: hidden;
  &::before {
    @include absolute-center;
    height: $button-height;
    content: 'Send';
    display: block;
    line-height: $button-height;
    color: $button-secondary-color;
    transition: all 0.3ss ease;
    width: 100%;
    z-index: 1;
  }
  &:focus {
    outline: none;
  }
}

.send-button--pressed {
  animation: sent 1.5s ease;
  &::before {
    content: 'Sent';
    animation: text 1.6s linear;
    color: $button-primary-color;
  }
  &::after {
    content: '';
    background-color: $button-secondary-color;
    height: 100%;
    width: 100%;
    opacity: 1;
    display: block;
    border-radius: $button-height;
    animation: bar 1s cubic-bezier(0.47, 0, 0.745, 0.715);
    position: absolute;
    left: 0;
    top: 0;
  }
}

@keyframes bar {
  0% {
    width: 0;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 100%;
  }
}

@keyframes sent {
  0% {
    height: $button-height;
  }
  
  30%, 90% {
    height: $button-height/2;
  }
 
  100% {
    height: $button-height;
  }
}

@keyframes text {
  0%, 90% {
    top: $button-height;
  }
  
  95% {
    top: -$button-height/2;
  }
  
  100% {
    top: 0;
  }
}

document.querySelector('.js-send-button').addEventListener('click', function (){
  this.classList.toggle('send-button--pressed');
});