.wrapper
  button.button.button--default
    .button__icon-wrapper
      .button__icon
    .button__text-wrapper
      .button__text.button__text--default Send
      .button__text.button__text--process Cancel
      .button__text.button__text--success Sent!
View Compiled
@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

body {
  background-color: WHITESMOKE;
}

.wrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.button {
  font-size: 1.2em;
  text-align: left;
  padding: 0.8em 1.4em;
  border-radius: 2em;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border: 0;
  color: WHITE;
  line-height: 1.6em;
  transition: background-color 300ms ease-in-out;
  &:focus {
    outline: 0;
  }
  &--default {
    background-color: CORNFLOWERBLUE;
    .button__text--default {
      opacity: 1;
      transform: translateY(0);
    }
    .button__text--success {
      transform: translateY(-20px);
    }
    .button__icon {
      width: 1em;
      height: 1em;
      margin: 0.3em 0.5em 0.3em 0;
      border-right: 3px solid white;
      border-top: 3px solid white;
      transform: rotate(45deg);
    }
  }
  &--process {
    pointer-events: none;
    background-color: MEDIUMSLATEBLUE; 
    .button__text--process {
      opacity: 1;
      transform: translateY(0);
    }
    .button__text--default {
      transform: translateY(-20px);
    }
    .button__icon {
      width: 1.2em;
      height: 1.2em;
      margin: 0.2em 0.5em 0.2em 0;
      border-radius: 100px;
      border: 3px solid white;
      animation: loading 1s infinite ease;
      clip-path: polygon(100% 0, 50% 50%, 100% 100%);
      -webkit-clip-path: polygon(100% 0, 50% 50%, 100% 100%);
    }
  }
  &--success {
    pointer-events: none;
    background-color: DARKTURQUOISE;   
    .button__text--success {
      opacity: 1;
      transform: translateY(0);
    }
    .button__text--process {
      transform: translateY(-20px);
    }
    .button__icon {
      margin: 0 0.3em 0.3em 0.1em;
      height: 1.2em;
      width: 0.9em;
      border-radius: 0;
      border-right: 3px solid white;
      border-bottom: 3px solid white;
      transform: rotate(405deg);
      animation: reveal 500ms ease-in;
    }
  }
  
  &__text-wrapper {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 1.6em;
    vertical-align: top;
  }
  
  &__text {
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: all 250ms ease-in-out;
  }
  
  &__icon-wrapper {
    width: 1.6em;
    height: 1.6em;
    margin-right: 1em;
    display: inline-block;
    vertical-align: top;
  }
  
  &__icon {
    transition: all 300ms ease-in-out;
    display: block;
    box-sizing: border-box;
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    clip-path: polygon(0 85%, 0 85%, 0 100%, 0 100%);
    -webkit-clip-path: polygon(0 85%, 0 85%, 0 100%, 0 100%);
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
View Compiled
const button = document.querySelector('.button');
button.addEventListener('click', function(){
  button.classList.remove('button--default');
  button.classList.add('button--process');
  setTimeout(function() {
    button.classList.remove('button--process');
    button.classList.add('button--success');
  }, 2000);
  setTimeout(function() {
    button.classList.remove('button--success');
    button.classList.add('button--default');
  }, 4500);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.