input(type="submit" role="submit")

input(type="button" role="delete" value="Delete")

input(type="button" role="send" value="Send")

$green: #1ECD97

*
  box-sizing: border-box

input 
  cursor: pointer

body
  height: 100vh
  width: 100%
  overflow: hidden
  display: flex
  justify-content: space-around
  align-items: center
  flex-direction: column

input[role="submit"]
  border: 2px solid $green
  background-color: transparent
  height: 60px
  line-height: 20px
  color: $green
  padding: 0
  width: 200px
  text-align: center
  border-radius: 200px
  font-size: 20px
  transition: all 200ms ease-in-out
  // animation: turn 2s ease-in-out 1 forwards
  &:focus
    outline: 0
  &:hover
    background-color: $green
    color: #fff
    outline: 0
  &:active
    font-size: 24px
    outline: 0
  &.clicked
    color: transparent
    background-color: transparent
    width: 60px
    border-width: 5px
    border-color: #ddd
    animation: turn 5s linear
    border-top-color: $green
  &.done, &.done:hover
    background-color: $green
    color: #fff
    font-family: 'FontAwesome'
    font-size: 40px
    position: relative
  
      
      
  
@keyframes turn
  10%
    transform: rotateZ(0deg)
  55%
    transform: rotatez(360deg)
  99%
    transform: rotateZ(720deg)
    background-color: transparent
    border-color: #ddd
    border-top-color: $green
  100%
    border-color: $green
    background-color: $green


$red: #FC4236

input[role="delete"]
  border: 2px solid $red
  background-color: transparent
  height: 60px
  line-height: 20px
  color: $red
  padding: 0
  width: 200px
  text-align: center
  border-radius: 200px
  font-size: 20px
  transition: all 200ms ease-in-out
  // animation: turn 2s ease-in-out 1 forwards
  &:focus
    outline: 0
  &:hover
    background-color: $red
    color: #fff
    outline: 0
  &:active
    font-size: 24px
    outline: 0
  &.clicked
    color: transparent
    background-color: transparent
    width: 60px
    border-width: 5px
    border-color: #ddd
    animation: turn-del 5s linear
    border-top-color: $red
  &.done, &.done:hover
    background-color: $red
    color: #fff
    font-family: 'FontAwesome'
    font-size: 40px
    position: relative
  
      
      
  
@keyframes turn-del
  10%
    transform: rotateZ(0deg)
  55%
    transform: rotatez(360deg)
  99%
    transform: rotateZ(720deg)
    background-color: transparent
    border-color: #ddd
    border-top-color: $red
  100%
    border-color: $red
    background-color: $red

$send: #4388FF

input[role="send"]
  border: 2px solid $send
  background-color: transparent
  height: 60px
  line-height: 20px
  color: $send
  padding: 0
  width: 200px
  text-align: center
  border-radius: 200px
  font-size: 20px
  transition: all 200ms ease-in-out
  // animation: turn 2s ease-in-out 1 forwards
  &:focus
    outline: 0
  &:hover
    background-color: $send
    color: #fff
    outline: 0
  &:active
    font-size: 24px
    outline: 0
  &.clicked
    color: transparent
    background-color: transparent
    width: 60px
    border-width: 5px
    border-color: #ddd
    animation: turn-send 5s linear
    border-top-color: $send
  &.done, &.done:hover
    background-color: $send
    color: #fff
    font-family: 'FontAwesome'
    font-size: 40px
    position: relative
  
      
      
  
@keyframes turn-send
  10%
    transform: rotateZ(0deg)
  55%
    transform: rotatez(360deg)
  99%
    transform: rotateZ(720deg)
    background-color: transparent
    border-color: #ddd
    border-top-color: $send
  100%
    border-color: $send
    background-color: $send

$('input[role="submit"]').click(function () {
  var $t = $(this);
  var hasClass = $t.hasClass('done');
  if (!hasClass){
    $(this).addClass('clicked');
    setTimeout(function(){
      $t.removeClass('clicked').addClass('done').attr({
        value: '',
      });
    }, time()); 
  } else if (hasClass){
    $t.removeClass().attr({
      value: 'Submit',
    })
  }
});

$('input[role="delete"]').click(function () {
  var $t = $(this);
  var hasClass = $t.hasClass('done');
  if (!hasClass){
    $(this).addClass('clicked');
    setTimeout(function(){
      $t.removeClass('clicked').addClass('done').attr({
        value: '',
      });
    }, time()); 
  } else if (hasClass){
    $t.removeClass().attr({
      value: 'Delete',
    })
  }
});

$('input[role="send"]').click(function () {
  var $t = $(this);
  var hasClass = $t.hasClass('done');
  if (!hasClass){
    $(this).addClass('clicked');
    setTimeout(function(){
      $t.removeClass('clicked').addClass('done').attr({
        value: '',
      });
    }, time()); 
  } else if (hasClass){
    $t.removeClass().attr({
      value: 'Send',
    });
  }
});

function time() {
  return 3000 + Math.random() * 2000
}