8+ JavaScript Submit Button Examples

This post contains a total of 8+ Hand-Picked JavaScript Submit Button Examples with Source Code. All the Submit Buttons are made using JavaScript & Styled using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Tamino Martinius

Made by Tamino Martinius. Cool JavaScript Submit button with success animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body,
html,
div {
  background: #292a38;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}
div a {
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  -o-transition: color 0.5s;
  -ms-transition: color 0.5s;
  transition: color 0.5s;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 20px;
  top: 100px;
  font-weight: 100;
  display: block;
  position: absolute;
  z-index: 3;
  text-decoration: none;
  width: 200px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
}
div a.loading {
  color: rgba(255,255,255,0);
}
div a.feedback {
  z-index: 1;
}
div a.feedback:after {
  -webkit-transition: background 0.2s, -webkit-transform 0.2s;
  -moz-transition: background 0.2s, -moz-transform 0.2s;
  -o-transition: background 0.2s, -o-transform 0.2s;
  -ms-transition: background 0.2s, -ms-transform 0.2s;
  transition: background 0.2s, transform 0.2s;
  border-radius: 30px;
  position: absolute;
  visibility: hidden;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
  content: '';
  background: rgba(255,255,255,0.9);
}
div a:hover {
  background: rgba(255,255,255,0.1);
}
#button {
  position: relative;
  z-index: 2;
  pointer-events: none;
  width: 240px;
  height: 220px;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
rect {
  -webkit-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  fill: #3e3f4c;
}
path {
  fill: none;
  stroke-width: 4px;
  stroke-linecap: round;
  stroke: #1ecd97;
  stroke-dashoffset: 0px;
}
path#top,
path#bottom {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-dasharray: 295px 1000px;
}
.loading-start a {
  color: rgba(255,255,255,0);
}
.loading-start a.loading {
  color: #fff;
}
.loading-start a.feedback:after {
  visibility: visible;
  background: rgba(255,255,255,0);
  -webkit-transform: scale(1.5, 2);
  -moz-transform: scale(1.5, 2);
  -o-transform: scale(1.5, 2);
  -ms-transform: scale(1.5, 2);
  transform: scale(1.5, 2);
}
.loading-start #top,
.loading-start #bottom {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-dasharray: 10px 1000px;
}
.loading-progress #top,
.loading-progress #bottom {
  -webkit-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  -moz-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  -o-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  -ms-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
  stroke-dasharray: 10px 1000px;
  stroke-dashoffset: -150px;
}
.loading-end a.loading {
  color: rgba(255,255,255,0);
}
.loading-end #top,
.loading-end #bottom {
  stroke: #f5f6f7;
}
.loading-end #top {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-dasharray: 30px 1000px;
  stroke-dashoffset: -518px;
}
.loading-end #bottom {
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-dasharray: 10px 1000px;
  stroke-dashoffset: -490px;
}
.loading-end rect {
  fill: #1ecd97 !important;
}
/* dribbble - twitter */
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
.dribbble img {
  display: block;
  height: 28px;
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
.twitter svg {
  width: 32px;
  height: 32px;
}
.twitter svg path {
  fill: #1da1f2;
  stroke: none;
}
</style>
</head>
<body>
  <div>
  <a href="#">submit</a>
  <a class="loading" href="#">loading</a>
  <svg id="button" viewBox="0 0 240 220">
    <rect id="middle" x="20" y="100" width="200" height="60" rx="30"></rect>
    <path id="top" d="
      M 60,100
      L 50,100
      C 33.4357078,100 20,113.427814 20,130
      L 20,130
      C 20,146.568541 33.4331197,160  50,160
      L190,160
      C206.570288,160 220,146.572314 220,130
      L220,100
      C220,-60 180, 80 160,100
      C140,120 100,160 100,160
    "></path>
    <path id="bottom" d="
      M180,160
      L190,160
      C206.564295,160 220,146.572186 220,130
      L220,130
      C220,113.431458 206.56688,100 190,100
      L 50,100
      C33.4297125,100 20,113.435296 20,130
      C20,130 20,120 20,140
      C20,220 180,200 120,140
      C100,120 80,100 80,100
    "></path>
  </svg>
  <a class="feedback" href="#"></a>
</div>
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
(function() {
  var resize;

  $("div").click(function() {
    if ($("div").hasClass("loading-start")) {
      if ($("div").hasClass("loading-end")) {
        return $("div").attr("class", "");
      }
    } else {
      setTimeout((function() {
        return $("div").addClass("loading-start");
      }), 0);
      setTimeout((function() {
        return $("div").addClass("loading-progress");
      }), 500);
      return setTimeout((function() {
        return $("div").addClass("loading-end");
      }), 1500);
    }
  });

  resize = function() {
    return $("body").css({
      "margin-top": ~~((window.innerHeight - 260) / 2) + "px"
    });
  };

  $(window).resize(resize);

  resize();

}).call(this);
    </script>
</body>
</html>

2. By Gabriel Soares

Made by Gabriel Soares. Submit Button with Loading Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,600');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ccffdc;
  overflow: hidden;
}

.container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  width:300px;
  height: 300px;
}

button {
  position: relative;
  width: 200px;
  height: 70px;
  border: none;
  border-radius: 5px;
  font-size: 1.5em;
  background-color:#ff6600;
  color: #fff;
  padding: 0 10px;
  font-family: 'Oswald', sans-serif;
  outline: 0;
}
button:hover {
  cursor: pointer;
  -webkit-animation: moveButton 0.4s ease forwards;
          animation: moveButton 0.4s ease forwards;
}
.bar ,
.load {
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 95%;
  height: 5px;
  background-color: #b34700;
  border-radius: 20px;
  opacity: 0;
  box-sizing: border-box;
  margin: 0 4.5px;
}

.load {
  background-color: #fff;
  z-index: 1;
  width: 0%;
}

button:active {
  outline: 0;
}

button:hover .bar {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
button:hover > strong > i {
  -webkit-animation: tremble 0.5s 0.4s ease;
          animation: tremble 0.5s 0.4s ease;
}
button:hover .load {
  opacity: 1;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.loading {
  position: absolute;
  top: 0px;
  left: -5px;
  width: 100%;
  opacity: 1;
  -webkit-transition: all 5s 0.1s linear;
  transition: all 5s 0.1s linear;
}

button.complete {
  background-color: #4EBA4E;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
button.complete .bar,
button.complete strong,
button.complete .load {
  opacity: 0;
}
button.complete:before {
  content: '\f00c';
  font-family: 'fontawesome';
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-weight: 600;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(1.2);
          transform: translateX(-50%) scale(1.2);
  color: #fff;
  font-size: 1.5em;
  opacity: 0;
  -webkit-animation: appear 0.5s 0.2s ease-in-out forwards;
          animation: appear 0.5s 0.2s ease-in-out forwards;
}

@-webkit-keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes tremble {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes tremble-end {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50%);
            transform: rotate(0deg) translateX(-50%);
  }
  25% {
    -webkit-transform: rotate(-10deg) translateX(-50%);
            transform: rotate(-10deg) translateX(-50%);
  }
  50% {
    -webkit-transform: rotate(0deg) translateX(-50%);
            transform: rotate(0deg) translateX(-50%);
  }
  75% {
    -webkit-transform: rotate(10deg) translateX(-50%);
            transform: rotate(10deg) translateX(-50%);
  }
  100% {
    -webkit-transform: rotate(0deg) translateX(-50%);
            transform: rotate(0deg) translateX(-50%);
  }
}

@keyframes tremble {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@-webkit-keyframes moveButton {
  0% {
    width: 200px;
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    border-radius: 5px;
  }
  10% {
    -webkit-transform: translateY(-12px) skew(-10deg);
            transform: translateY(-12px) skew(-10deg);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  15% {
    -webkit-transform: translateY(-7px) skew(10deg);
            transform: translateY(-7px) skew(10deg);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  20% {
    -webkit-transform: translateY(-2px) skew(-15deg);
            transform: translateY(-2px) skew(-15deg);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  30% {
    -webkit-transform: translateY(0px) skew(15deg);
            transform: translateY(0px) skew(15deg);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  40% {
    -webkit-transform: skew(-20deg);
            transform: skew(-20deg);
    width: 210px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  50% {
    -webkit-transform: skew(20deg);
            transform: skew(20deg);
    width: 210px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  60% {
    -webkit-transform: skew(-15deg);
            transform: skew(-15deg);
    width: 200px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  70% {
    -webkit-transform: skew(15deg);
            transform: skew(15deg);
    width: 200px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  80% {
    -webkit-transform: skew(-10deg);
            transform: skew(-10deg);
    width: 200px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  90% {
    -webkit-transform: skew(5deg);
            transform: skew(5deg);
    width: 200px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  100% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    width: 200px;
    border-radius: 5px;
  }
}

@keyframes moveButton {
  0% {
    width: 200px;
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    border-radius: 5px;
  }
  10% {
    -webkit-transform: translateY(-12px) skew(-10deg);
            transform: translateY(-12px) skew(-10deg);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  15% {
    -webkit-transform: translateY(-7px) skew(10deg);
            transform: translateY(-7px) skew(10deg);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  20% {
    -webkit-transform: translateY(-2px) skew(-15deg);
            transform: translateY(-2px) skew(-15deg);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  30% {
    -webkit-transform: translateY(0px) skew(15deg);
            transform: translateY(0px) skew(15deg);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  40% {
    -webkit-transform: skew(-20deg);
            transform: skew(-20deg);
    width: 210px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  50% {
    -webkit-transform: skew(20deg);
            transform: skew(20deg);
    width: 210px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  60% {
    -webkit-transform: skew(-15deg);
            transform: skew(-15deg);
    width: 200px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  70% {
    -webkit-transform: skew(15deg);
            transform: skew(15deg);
    width: 200px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  80% {
    -webkit-transform: skew(-10deg);
            transform: skew(-10deg);
    width: 200px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
  }
  90% {
    -webkit-transform: skew(5deg);
            transform: skew(5deg);
    width: 200px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  100% {
    -webkit-transform: skew(0deg);
            transform: skew(0deg);
    width: 200px;
    border-radius: 5px;
  }
}
</style>
</head>
<body>
  <div class="container">
  <button type="submit"><strong>Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></strong><span class="bar"><span class="load"></span><span></button>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script id="rendered-js" >
var lBar = $(".load");
var bar = $("button span");
var button = $("button");

button.on("click", function () {
  lBar.addClass("loading");
  setTimeout(function () {
    lBar.removeClass("loading");
    button.addClass("complete");
  }, 500);
});
    </script>
</body>
</html>

3. By linmic

Made by linmic. Subtle Loading JavaScript Buttons. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@keyframes loading {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 80px 0;
  }
}
body {
  padding: 15px;
  background: url("https://s.cdpn.io/19243/textured_paper.jpg") repeat;
}

.btn {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 180px;
  height: 60px;
  font: bold 26px/60px Verdana, monospace, sans-serif;
  color: #fff;
  background-color: #3EA0FF;
  border: none;
  margin: 0 15px 15px 0;
  transition: text-shadow 0.3s ease;
  text-transform: uppercase;
  -moz-box-shadow: 0 1px 2px #999;
  -webkit-box-shadow: 0 1px 2px #999;
  box-shadow: 0 1px 2px #999;
}
.btn:focus {
  outline: none;
}

.btn:hover,
.btn.loading {
  text-shadow: 0 1px 0 #333;
}

.btn.loading {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(25%, rgba(255, 255, 255, 0.2)), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
  background-size: 80px 80px;
  animation: loading 1.5s linear infinite;
}

.btn:nth-child(2) {
  background-color: #FFBF41;
}

.btn:nth-child(3) {
  background-color: #EE8943;
}

.btn:nth-child(4) {
  background-color: #C02221;
}

.btn:nth-child(5) {
  background-color: #824167;
}

.btn:nth-child(6) {
  background-color: #249CA9;
}
</style>
</head>
<body>
  <button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
(function() {
  $('.btn').on('click', function() {
    return $(this).toggleClass('loading');
  });

  $('.btn:odd').addClass('loading');

}).call(this);
    </script>
</body>
</html>

4. By Martin Machycek

Made by Martin Machycek. Javascript Submit button with Loading & Success Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://www.dropbox.com/s/udfqeb2pkbcv3be/styles.css'>
  
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  text-align: center;
  font-family: "Lato";
}

.wrap {
  position: relative;
  margin: auto;
  margin-top: 5%;
  width: 191px;
  text-align: center;
}
.wrap button {
  display: block;
  height: 60px;
  padding: 0;
  width: 191px;
  background: none;
  margin: auto;
  border: 2px solid #1ECD97;
  font-size: 18px;
  font-family: "Lato";
  color: #1ECD97;
  cursor: pointer;
  outline: none;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -moz-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
  -o-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
  -webkit-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
  transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
}
.wrap button:hover {
  background: #1ECD97;
  color: white;
}
.wrap img {
  position: absolute;
  top: 11px;
  display: none;
  left: 71.5px;
  -moz-transform: scale(0.6, 0.6);
  -ms-transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6);
  transform: scale(0.6, 0.6);
}
.wrap svg {
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  /* @include rotate(270deg); */
  position: absolute;
  top: -2px;
  left: 62px;
  display: none;
}
.wrap svg .circle_2 {
  stroke-dasharray: 0 200;
}
.wrap svg .fill_circle {
  -moz-animation: fill-stroke 2s 0.4s linear forwards;
  -webkit-animation: fill-stroke 2s 0.4s linear forwards;
  animation: fill-stroke 2s 0.4s linear forwards;
}
.wrap .circle {
  width: 60px;
  border: 3px solid #c3c3c3;
  /* border: none; */
}
.wrap .circle:hover {
  background: none;
}
.wrap .filled {
  background: #1ECD97;
  color: white;
  line-height: 60px;
  font-size: 160%;
}

footer p {
  color: #738087;
  margin-top: 100px;
  font-size: 18px;
  line-height: 28px;
}

@-moz-keyframes fill-stroke {
  0% {
    stroke-dasharray: 0 200;
  }
  20% {
    stroke-dasharray: 20 200;
  }
  40% {
    stroke-dasharray: 30 200;
  }
  50% {
    stroke-dasharray: 90 200;
  }
  70% {
    stroke-dasharray: 120 200;
  }
  90% {
    stroke-dasharray: 140 200;
  }
  100% {
    stroke-dasharray: 182 200;
  }
}
@-webkit-keyframes fill-stroke {
  0% {
    stroke-dasharray: 0 200;
  }
  20% {
    stroke-dasharray: 20 200;
  }
  40% {
    stroke-dasharray: 30 200;
  }
  50% {
    stroke-dasharray: 90 200;
  }
  70% {
    stroke-dasharray: 120 200;
  }
  90% {
    stroke-dasharray: 140 200;
  }
  100% {
    stroke-dasharray: 182 200;
  }
}
@keyframes fill-stroke {
  0% {
    stroke-dasharray: 0 200;
  }
  20% {
    stroke-dasharray: 20 200;
  }
  40% {
    stroke-dasharray: 30 200;
  }
  50% {
    stroke-dasharray: 90 200;
  }
  70% {
    stroke-dasharray: 120 200;
  }
  90% {
    stroke-dasharray: 140 200;
  }
  100% {
    stroke-dasharray: 182 200;
  }
}
a, p {
  line-height: 1.6em;
}

a {
  color: #738087;
}
</style>
</head>
<body>
  <div class="wrap">
    <button type="submit">Submit</button>
    <img src="https://www.dropbox.com/s/qfu4871umzhlcfo/check_arrow_2.svg?dl=1" alt="">
    <svg width="66px" height="66px">
      <circle class="circle_2" stroke-position="outside" stroke-width="3" fill="none" cx="34" cy="33" r="29" stroke="#1ECD97"></circle>
    </svg>
  </div>
  <footer>
    <p>Thanks for checking this pen</p>
    <a href="http://machycek.com">See more</a
  </footer>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var timer = null;
  var self = $("button");
  var clicked = false;
  $("button").on("click", function () {
    if (clicked === false) {
      self.removeClass("filled");
      self.addClass("circle");
      self.html("");
      clicked = true;
      $("svg").css("display", "block");
      $(".circle_2").attr("class", "circle_2 fill_circle");

      timer = setInterval(
      function tick() {
        self.removeClass("circle");
        self.addClass("filled");
        // self.html("b");
        $(".wrap img").css("display", "block");
        $("svg").css("display", "none");
        clearInterval(timer);
      }, 2500);
    }
  });
});
    </script>
</body>
</html>

5. By Aaron Iker

Made by Aaron Iker. Smash to submit button with animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'>
  
<style>
.button {
  --color: #F6F8FF;
  --background: #171827;
  --background-hover: #0D0F18;
  --shadow: rgba(0, 9, 61, 0.12);
  --person: #F6F8FF;
  --person-arm: var(--person);
  --person-leg: #D1D6EE;
  --weight: #275EFE;
  --weight-disk: #5C86FF;
  --person-y: 0;
  --weight-y: 0;
  --arm-rotate: 40;
  --arm-rotate-s: -40;
  --arm-rotate-s-x: 0;
  --leg-y: -2;
  --leg-rotate: 45;
  --leg-rotate-s: -70;
  display: table;
  outline: none;
  border: none;
  background: none;
  padding: 0;
  position: relative;
  cursor: pointer;
  line-height: 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.button .inner {
  padding: 14px 20px;
  transition: transform 0.2s, background 0.4s;
  color: var(--color);
  position: relative;
  display: flex;
  z-index: 1;
  min-width: 190px;
  border-radius: 13px;
  background: var(--b, var(--background));
  box-shadow: 0 1px 3px var(--shadow), 0 3px 7px var(--shadow);
  transform: scale(var(--scale, 1)) translateZ(0);
}
.button .inner:active {
  --scale: .95;
}
.button .inner:hover {
  --b: var(--background-hover);
}
.button .icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  display: block;
  position: relative;
}
.button .icon .person,
.button .icon .weight {
  position: absolute;
}
.button .icon .person {
  top: 7px;
  left: 9px;
  width: 6px;
  height: 10px;
  transform: translateY(calc(var(--person-y) * 1px));
}
.button .icon .person:before, .button .icon .person:after {
  content: "";
  position: absolute;
  left: 0;
}
.button .icon .person:before {
  top: -5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--person);
  transform: scale(0.7);
  transform-origin: 50% 25%;
}
.button .icon .person:after {
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 2px 2px 3px 3px;
  background: var(--person);
}
.button .icon .person .arm,
.button .icon .person .leg {
  position: absolute;
  left: var(--left, 0);
  top: var(--top, 0);
  width: 2px;
  height: 7px;
  border-radius: 1px;
  transform-origin: 1px 1px;
  background: var(--background);
  transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)) rotateZ(calc(var(--rotate, 0) * 1deg));
}
.button .icon .person .arm:before,
.button .icon .person .leg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 2px;
  height: 7px;
  border-radius: 1px;
  transform-origin: 1px 1px;
  background: inherit;
  transform: rotateZ(calc(var(--rotate-s, 0) * 1deg)) rotateX(calc(var(--rotate-s-x, 0) * 1deg));
}
.button .icon .person .arm.right,
.button .icon .person .leg.right {
  --left: 4px;
  transform: translate(calc(var(--x, 0) * -1px), calc(var(--y, 0) * 1px)) rotateZ(calc(var(--rotate, 0) * -1deg));
}
.button .icon .person .arm.right:before,
.button .icon .person .leg.right:before {
  transform: rotateZ(calc(var(--rotate-s, 0) * -1deg)) rotateX(calc(var(--rotate-s-x, 0) * 1deg));
}
.button .icon .person .arm {
  --background: var(--person-arm);
  --rotate: var(--arm-rotate);
  --rotate-s: var(--arm-rotate-s);
  --rotate-s-x: var(--arm-rotate-s-x);
  z-index: 1;
}
.button .icon .person .leg {
  --top: 8px;
  --background: var(--person-leg);
  --y: var(--leg-y);
  --rotate: var(--leg-rotate);
  --rotate-s: var(--leg-rotate-s);
}
.button .icon .weight {
  top: 17px;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--weight);
  transform: translateY(calc(var(--weight-y, 0) * 1px));
}
.button .icon .weight:before, .button .icon .weight:after {
  content: "";
  position: absolute;
  border-radius: 1px;
  left: var(--l, 1px);
  top: var(--t, -2px);
  width: var(--w, 2px);
  height: var(--h, 6px);
  background: var(--weight-disk);
  box-shadow: var(--bx, 20px) 0 0 var(--weight-disk);
}
.button .icon .weight:after {
  --l: 3px;
  --t: -3px;
  --h: 8px;
  --bx: 16px;
}
.button .text {
  position: relative;
}
.button .text span {
  display: block;
  white-space: nowrap;
  opacity: var(--o, 1);
  transform: translateX(var(--x, 0));
  transition: transform 0.3s, opacity 0.2s;
}
.button .text span:last-child {
  --o: 0;
  --x: 8px;
  position: absolute;
  left: 0;
  top: 0;
}
.button .ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.button .ripple:before {
  content: "";
  position: absolute;
  top: calc(var(--ripple-y, 0) * 1px);
  left: calc(var(--ripple-x, 0) * 1px);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  width: 200%;
  padding-bottom: 200%;
  border-radius: 50%;
  background: currentColor;
  -webkit-animation: ripple 0.5s ease-in;
          animation: ripple 0.5s ease-in;
}
.button i {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -2px;
  opacity: var(--o, 0);
  background: var(--b);
  transform: translate(var(--x), var(--y)) scale(var(--s, 1));
}
.button.complete .text span:first-child {
  --o: 0;
  --x: -8px;
}
.button.complete .text span:last-child {
  --o: 1;
  --x: 0;
}
.button.complete.confetti i {
  -webkit-animation: confetti 0.6s ease-out forwards;
          animation: confetti 0.6s ease-out forwards;
}

@-webkit-keyframes confetti {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes confetti {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes ripple {
  25% {
    opacity: 0.07;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes ripple {
  25% {
    opacity: 0.07;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background: #E4ECFA;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
body .dribbble img {
  display: block;
  height: 28px;
}
body .twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}
body .twitter svg {
  width: 32px;
  height: 32px;
  fill: #1da1f2;
}
</style>
</head>
<body>
  <button class="button">
    <div class="inner">
        <div class="icon">
            <div class="person">
                <div class="arm"></div>
                <div class="arm right"></div>
                <div class="leg"></div>
                <div class="leg right"></div>
            </div>
            <div class="weight"></div>
        </div>
        <div class="text">
            <span>Smash to submit</span>
            <span>Yaay! Submitted.</span>
        </div>
    </div>
</button>
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js'></script>
      <script>
let confettiAmount = 100,
confettiColors = [
'#7d32f5',
'#f6e434',
'#63fdf1',
'#e672da',
'#295dfe',
'#6e57ff'],

random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
},
createConfetti = to => {
  let elem = document.createElement('i'),
  set = Math.random() < 0.5 ? -1 : 1;
  elem.style.setProperty('--x', random(-360, 360) + 'px');
  elem.style.setProperty('--y', random(-200, 200) + 'px');
  elem.style.setProperty('--r', random(0, 360) + 'deg');
  elem.style.setProperty('--s', random(.6, 1));
  elem.style.setProperty('--b', confettiColors[random(0, 5)]);
  to.appendChild(elem);
};

document.querySelectorAll('.button').forEach(button => {

  let complete = false,
  timeline = gsap.timeline({
    paused: true,
    ease: 'none',
    onComplete() {
      complete = true;
      button.classList.add('complete');
      for (let i = 0; i < confettiAmount; i++) {
        createConfetti(button);
      }
      setTimeout(() => {
        button.classList.add('confetti');
        setTimeout(() => button.querySelectorAll('i').forEach(i => i.remove()), 600);
      }, 300);
      // Reset
      setTimeout(() => {
        button.classList.remove('complete', 'confetti');
        complete = false;
      }, 2000);
    } }),

  up = 0;

  timeline.to(button, {
    keyframes: [{
      '--weight-y': -6,
      '--arm-rotate-s-x': 90,
      duration: .3 },
    {
      '--weight-y': -10,
      '--arm-rotate-s-x': 45,
      '--arm-rotate-s': 130,
      duration: .2 },
    {
      '--weight-y': -12,
      '--arm-rotate-s': 130,
      '--arm-rotate-s-x': 0,
      duration: .1 },
    {
      '--weight-y': -20,
      '--person-y': -4,
      '--arm-rotate': 100,
      '--arm-rotate-s': 90,
      '--leg-y': 0,
      '--leg-rotate': 20,
      '--leg-rotate-s': -20,
      duration: .2 },
    {
      '--weight-y': -25,
      '--arm-rotate': 150,
      '--arm-rotate-s': 30,
      duration: .2 }] });



  button.addEventListener('click', e => {

    up = 1;

    const rippleDiv = document.createElement('div');

    rippleDiv.className = 'ripple';

    const boundingClientRect = button.getBoundingClientRect();

    button.style.setProperty('--ripple-x', e.clientX - boundingClientRect.left);
    button.style.setProperty('--ripple-y', e.clientY - boundingClientRect.top);

    button.querySelector('.inner').appendChild(rippleDiv);

    setTimeout(() => rippleDiv.remove(), 500);

  });

  setInterval(() => {

    up = up > 0 ? up - .1 : 0;

    let progress = timeline.progress(),
    direction = up > 0 ? 1 : -1.5;

    if (!complete) {
      timeline.progress(progress + .01 * direction);
    }

  }, 1000 / 60);

});
    </script>
</body>
</html>

6. By burnaDLX

Made by burnaDLX. JavaScript Submit Button with Flying Paper plane Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
  
<style>
html {
  box-sizing: border-box;
  font-size: 62.5%;
  overflow: hidden;
}

* {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: inherit;
}
*::after, *::before {
  box-sizing: inherit;
}

body .send-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes icon-animation {
  0% {
    transform: rotate(0deg) scale(1);
  }
  33% {
    transform: rotate(-120deg) scale(4);
  }
  66% {
    transform: rotate(-240deg) scale(4);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}
@keyframes input-shadow {
  0% {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  }
  40% {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: none;
  }
  70% {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  }
}
.icon-wrapper-animation {
  animation: icon-animation 1.5s linear;
  transition: color 0.6s ease;
  color: #66bb6a;
}

.clicked {
  transform: translate(-50%, calc(-50% + 1px)) !important;
  transition: transform 0.15s ease;
  animation: input-shadow 0.15s ease;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.clicked > .text {
  transform: translateY(1px);
  transition: transform 0.15s ease-out;
}

body {
  background-color: #d81b60;
}
body .send-button {
  background-color: #c51162;
  width: 250px;
  height: 45px;
  border-radius: 2px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s;
  text-shadow: 1px 2px 1px rgba(77, 9, 36, 0.6);
}
body .send-button .text {
  position: absolute;
  left: 10px;
  font-size: 22px;
  font-size: 2.2rem;
  letter-spacing: 1px;
  line-height: 45px;
  font-family: "Roboto";
  font-weight: 700;
  color: #f8bbd0;
  text-transform: uppercase;
}
body .send-button .icon-wrapper {
  position: absolute;
  right: -65px;
  bottom: -10px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  line-height: 45px;
  color: #f8bbd0;
}
body .send-button .icon-wrapper [class*=icon-] {
  position: absolute;
  left: 100px;
  bottom: 10px;
  transition: color 0.6s ease;
}
body .send-button .icon-wrapper .icon-1 {
  transform: rotate(15deg);
  font-size: 23px;
  font-size: 2.3rem;
  opacity: 1;
}
body .send-button .icon-wrapper .icon-2 {
  opacity: 0;
  font-size: 25px;
  font-size: 2.5rem;
}
</style>
</head>
<body>
  <div class="send-button">
 <span class="text">send</span>
  <span class="icon-wrapper">
  	<span class="icon-1 ion-paper-airplane"></span>
		<span class="icon-2 ion-checkmark"></span>
  </span>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script id="rendered-js" >
$(() => {
  var $sendBtn = $('.send-button'),
  $iWrapper = $('.icon-wrapper'),
  $i1 = $('.icon-1'),
  $i2 = $('.icon-2');

  function animationEvent() {
    var t,
    el = document.createElement('fakeelement');

    var animations = {
      animation: 'animationend',
      OAnimation: 'oAnimationEnd',
      MozAnimation: 'animationend',
      WebkitAnimation: 'webkitAnimationEnd' };


    for (t in animations) {
      if (el.style[t] !== undefined) {
        return animations[t];
      }
    }
  }

  $sendBtn.on('click', e => {
    $iWrapper.css('color', '#66bb6a');
    $iWrapper.addClass('icon-wrapper-animation');
    $sendBtn.addClass('clicked');
    $i1.delay(900);
    $i1.fadeTo(300, 0);
    $i2.delay(900);
    $i2.fadeTo(300, 1);
  });

  $sendBtn.on(animationEvent(), e => {
    if (e.originalEvent.animationName == 'input-shadow') {
      $sendBtn.removeClass('clicked');
    }
  });

  $iWrapper.on(animationEvent(), e => {
    if (e.originalEvent.animationName == 'icon-animation') {
      $iWrapper.removeClass('icon-wrapper-animation');
      setTimeout(reset, 1200);
    }
  });

  function reset() {
    $i1.fadeTo(250, 1);
    $i2.fadeTo(250, 0);
    $iWrapper.css('color', '#f8bbd0');
  }
}); // end of document ready
    </script>
</body>
</html>

7. By Dronca Raul

Made by Dronca Raul. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600'>
  
<style>
/* Global Styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
}

/* Button */
.btn {
  background: transparent;
  width: 200px;
  position: relative;
  padding: 15px;
  color: #1ECD97;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  border-radius: 4px;
  font-weight: 600;
  overflow: hidden;
  border: 2px solid #1ECD97;
  text-decoration: none;
}

/* In Progress Button */
.btn-progress {
  width: 500px;
  color: transparent;
}

.btn-fill:after {
  content: '';
  background: #1ECD97;
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0;
  display: block;
  -webkit-animation: fill 3.2s linear forwards;
          animation: fill 3.2s linear forwards;
}

/* Button Complete */
.btn-complete {
  padding: 10px;
  width: 50px;
  color: #fff;
  pointer-events: none;
}

.btn-complete:after {
  font-family: FontAwesome;
  content: "\f00c";
  color: #fff;
  height: 100%;
  padding-left: 3px;
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1ECD97;
}

/* Animation */
@-webkit-keyframes fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
</style>
</head>
<body>
  <a href="#" class='btn'>Submit</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script id="rendered-js" >
$(function () {
  var btn = $(".btn");

  btn.on("click", function () {

    $(this).addClass('btn-progress');
    setTimeout(function () {
      btn.addClass('btn-fill');
    }, 500);

    setTimeout(function () {
      btn.removeClass('btn-fill');
    }, 4100);

    setTimeout(function () {
      btn.addClass('btn-complete');
    }, 4100);

  });
});
    </script>
</body>
</html>

8. By Jon Kantner

Made by Jon Kantner. Morphing Submit Button made using JavaScript. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito&amp;display=swap'>
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg1: hsl(var(--hue),10%,90%);
	--bg2: hsl(var(--hue),10%,80%);
	--fg1: hsl(var(--hue),10%,10%);
	--fg2: hsl(var(--hue),10%,20%);
	--primary1: hsl(var(--hue),90%,55%);
	--primary2: hsl(var(--hue),90%,45%);
	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button {
	font: 1em/1.5 Nunito, sans-serif;
}
body {
	background-color: var(--bg1);
	color: var(--fg1);
	height: 100vh;
	display: grid;
	place-items: center;
}

/* Main button styles */
.btn {
	background-color: transparent;
	border-radius: 1.5em;
	display: block;
	position: relative;
	width: 7.5em;
	height: 3em;
	transition: width 0.3s ease-in-out;
}
.btn:not(:disabled):active {
	transform: translateY(0.1em);
}
.btn__text {
	background-color: var(--primary1);
	border-radius: inherit;
	color: hsl(0,0%,100%);
	display: inline-block;
	padding: 0.75em 1.5em;
	transition:
		background-color 0.15s linear,
		color 0.15s 0.3s ease-in-out;
	width: 100%;
}
.btn:not(:disabled):focus .btn__text,
.btn:not(:disabled):hover .btn__text {
	background-color: var(--primary2);
}
.btn__progress {
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	width: 3em;
	height: 3em;
	visibility: hidden;
}
.btn__progress-track {
	r: 12px;
	stroke: var(--bg2);
	stroke-width: 24;
}
.btn__progress-fill {
	stroke: var(--primary1);
	stroke-dashoffset: 125.66;
}
.btn__progress-check {
	stroke: hsl(0,0%,100%);
	stroke-dashoffset: 34;
}

/* Both states */
.btn--running,
.btn--done {
	outline: none;
	pointer-events: none;
	width: 3em;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.btn--running .btn__text,
.btn--done .btn__text {
	color: transparent;
	transition:
		background-color 0.3s ease-in-out,
		visibility 0.3s steps(1);
}
.btn--running .btn__progress,
.btn--done .btn__progress {
	visibility: visible;
}

/* Running state */
.btn--running .btn__text {
	background-color: var(--bg2);
	visibility: hidden;
}
.btn--running .btn__progress {
	transition: visibility 0.3s 0.3s steps(1,start);
}
.btn--running .btn__progress-track {
	r: 20px;
	stroke-width: 8;
	transition:
		r 0.3s 0.3s ease-in-out,
		stroke-width 0.3s 0.3s ease-in-out;
}
.btn--running .btn__progress-fill {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2s 0.6s linear;
}

/* Done state */
.btn--done .btn__progress-track {
	stroke: var(--primary1);
	transition:
		r 0.3s ease-in-out,
		stroke-width 0.3s ease-in-out;
}
.btn--done .btn__progress-check {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.3s 0.3s ease-out;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg1: hsl(var(--hue),10%,10%);
		--bg2: hsl(var(--hue),10%,20%);
		--fg1: hsl(var(--hue),10%,90%);
		--fg2: hsl(var(--hue),10%,80%);
	}
}
</style>
</head>
<body>
  <button class="btn" type="button">
	<span class="btn__text">Submit</span>
	<svg class="btn__progress" viewBox="0 0 48 48" width="48px" height="48px">
		<circle class="btn__progress-track" r="20" cx="24" cy="24" fill="none" stroke="#c7cad1" stroke-width="8" />
		<circle class="btn__progress-fill" r="20" cx="24" cy="24" fill="none" stroke="#000000" stroke-width="8" transform="rotate(-90,24,24)" stroke-dasharray="125.66 125.66" stroke-dashoffset="125.66" />
		<polyline class="btn__progress-check" points="12,24 20,32 36,16" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="34 34" stroke-dashoffset="34" />
	</svg>
</button>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
window.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector("button");
  var doneTimeout = null,
  resetTimeout = null;

  if (btn) {
    btn.addEventListener("click", function () {
      const runClass = "btn--running";
      const doneClass = "btn--done";
      // `.btn--running .btn__progress-fill` `stroke-dashoffset` duration in ms
      const submitDuration = 2000;
      const resetDuration = 1500;

      // fake the submission
      this.disabled = true;
      this.classList.add(runClass);

      clearTimeout(doneTimeout);
      clearTimeout(resetTimeout);

      doneTimeout = setTimeout(() => {
        this.classList.remove(runClass);
        this.classList.add(doneClass);

        // reset the button
        resetTimeout = setTimeout(() => {
          this.disabled = false;
          this.classList.remove(doneClass);
        }, resetDuration);

      }, 600 + submitDuration);
    });
  }
});
    </script>
</body>
</html>

9. By Pontus Nilsson

Made by Pontus Nilsson. Submit button with success animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  color: #444;
  line-height: 1.4;
  font-size: 16px;
  font-family: sans-serif;
  -webkit-tap-highlight-color: transparent;
}

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(720deg);
  }
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60px;
}

button {
  position: relative;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 60px 0 0;
  padding: 0;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  background-color: transparent;
  outline: 0;
  cursor: pointer;
  overflow: hidden;
}

.spin {
  border: 2px solid #1ecd97;
  color: #1ecd97;
  font-weight: 600;
  transition: all 200ms ease-in-out;
}
.spin span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity 200ms ease-in-out;
}
.spin span:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.spin svg {
  height: 30px;
  fill: #1ecd97;
}
.spin:hover {
  background-color: #1ecd97;
  color: #fff;
}
.spin.done, .spin.processing {
  pointer-events: none;
  cursor: default;
}
.spin.processing {
  width: 50px;
  border-width: 4px;
  border-right-color: #bbb;
  border-bottom-color: #bbb;
  animation: spin;
  animation-delay: 200ms;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
.spin.processing:hover {
  background-color: transparent;
}
.spin.processing span:first-child {
  opacity: 0;
}
.spin.done:hover {
  background-color: transparent;
}
.spin.done span:first-child {
  opacity: 0;
}
.spin.done span:last-child {
  opacity: 1;
}
</style>
</head>
<body>
  <button class="spin" id="spin">
  <span>Submit</span>
  <span>
    <svg viewBox="0 0 24 24">
      <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
    </svg>
  </span>
</button>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script id="rendered-js" >
$("button").click(function () {
  var target = $(this);
  if (target.hasClass("done")) {
    // Do nothing
  } else {
    target.addClass("processing");
    setTimeout(function () {
      target.removeClass("processing");
      target.addClass("done");
    }, 2200);
  }
});
    </script>
</body>
</html>