pkoeb67vy/WebRoot/button.jsp

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


<input type="submit" class="order"><span class="default">Complete Order</span><span class="success">Order Placed
    <svg viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span>
  <div class="box"></div>
  <div class="drone">
    <svg class="wing left">
      <use xlink:href="#droneWing"></use>
    </svg>
    <svg class="wing right">
      <use xlink:href="#droneWing"></use>
    </svg>
    <svg class="body">
      <use xlink:href="#droneBody"></use>
    </svg>
    <svg class="grab">
      <use xlink:href="#droneGrab"></use>
    </svg>
  </div>



<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 14" id="droneBody" fill="currentColor" stroke="none">
    <path d="M38,0.5 C38,0.223857625 38.2238576,5.07265313e-17 38.5,0 C38.7761424,-5.07265313e-17 39,0.223857625 39,0.5 L39,4 C39.5522847,4 40,4.44771525 40,5 L40,6 L40.5,6 C41.3284271,6 42,6.67157288 42,7.5 C42,8.32842712 41.3284271,9 40.5,9 L30,9 L30,9.86761924 C30,10.5701449 29.6314023,11.2211586 29.0289915,11.5826051 L25.4750236,13.7149859 C25.1641928,13.9014843 24.80852,14 24.4460321,14 L17.5539679,14 C17.19148,14 16.8358072,13.9014843 16.5249764,13.7149859 L12.9710085,11.5826051 C12.3685977,11.2211586 12,10.5701449 12,9.86761924 L12,9 L1.5,9 C0.671572875,9 1.01453063e-16,8.32842712 0,7.5 C-1.01453063e-16,6.67157288 0.671572875,6 1.5,6 L2,6 L2,5 C2,4.44771525 2.44771525,4 3,4 L3,0.5 C3,0.223857625 3.22385763,5.07265313e-17 3.5,0 C3.77614237,-5.07265313e-17 4,0.223857625 4,0.5 L4,4 C4.55228475,4 5,4.44771525 5,5 L5,6 L12.005,6 L12.0064818,5.97128221 C12.0580908,5.33141252 12.414937,4.75103782 12.9710085,4.41739491 L16.5249764,2.28501415 C16.8358072,2.09851567 17.19148,2 17.5539679,2 L24.4460321,2 C24.80852,2 25.1641928,2.09851567 25.4750236,2.28501415 L29.0289915,4.41739491 C29.5934099,4.75604592 29.952577,5.34889137 29.9956355,6.0001358 L37,6 L37,5 C37,4.44771525 37.4477153,4 38,4 L38,0.5 Z"></path>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 14" id="droneGrab" fill="none" stroke="currentColor">
    <path d="M5,13 L1,13 C1,7.66666667 3.33333333,3.66666667 8,1 L17.996238,1 C22.6654127,3 25,7 25,13 L21.0005587,13" stroke-width="2" stroke-linecap="round"></path>
  </symbol>
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 2" id="droneWing" fill="currentColor" stroke="none">
    <path d="M13,2 C12.4477153,2 12,1.55228475 12,1 C12,0.44771525 12.4477153,0 13,0 C13.5522847,0 21,0.44771525 21,1 C21,1.55228475 13.5522847,2 13,2 Z"></path>
    <path d="M8,2 C7.44771525,2 0,1.55228475 0,1 C0,0.44771525 7.44771525,0 8,0 C8.55228475,0 9,0.44771525 9,1 C9,1.55228475 8.55228475,2 8,2 Z"></path>
  </symbol>
</svg>



<style>
:root {
  --primary: #275EFE;
  --primary-dark: #2850C4;
  --primary-light: #668DFF;
  --dark: #1C212E;
  --white: #FFF;
  --green: #16BF78;
  --sand: #DCB773;
}

.order {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: var(--white);
  position: relative;
  height: 63px;
  width: 240px;
  padding: 0;
  cursor: pointer;
  border-radius: 32px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}
.order span {
  --y: 0;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 19px;
  line-height: 24px;
  color: var(--dark);
  font-size: 16px;
  font-weight: 500;
  -webkit-transform: translateY(var(--y));
          transform: translateY(var(--y));
}
.order span.default {
  transition-delay: .3s;
  transition: opacity .3s ease .3s;
}
.order span.success {
  --y: 60px;
  transition: -webkit-transform .5s ease;
  transition: transform .5s ease;
  transition: transform .5s ease, -webkit-transform .5s ease;
}
.order span.success svg {
  width: 12px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 7px 0 0 4px;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: stroke-dashoffset .3s ease;
}
.order:active {
  -webkit-transform: scale(0.94);
          transform: scale(0.94);
}
.order .box,
.order .drone {
  position: absolute;
}
.order .box {
  width: 20px;
  height: 20px;
  left: 50%;
  margin-left: -10px;
  top: 100%;
  border-radius: 2px;
  background: var(--sand);
}
.order .box:before, .order .box:after {
  content: '';
  position: absolute;
  display: block;
  left: 5px;
}
.order .box:before {
  top: 0;
  width: 4px;
  height: 9px;
  background: rgba(255, 255, 255, 0.3);
}
.order .box:after {
  z-index: 1;
  top: 7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 2px 2px 2px;
  border-color: transparent transparent var(--sand) transparent;
}
.order .drone {
  width: 42px;
  height: 14px;
  z-index: 1;
  top: 16px;
  right: 100%;
  -webkit-transform: translateX(-7px);
          transform: translateX(-7px);
}
.order .drone svg {
  display: block;
}
.order .drone svg.body {
  width: 42px;
  height: 14px;
  position: relative;
  z-index: 1;
  color: var(--primary);
}
.order .drone svg.wing {
  position: absolute;
  width: 21px;
  height: 2px;
  top: 1px;
  color: var(--primary-light);
}
.order .drone svg.wing.left {
  left: -7px;
}
.order .drone svg.wing.right {
  right: -7px;
}
.order .drone svg.grab {
  position: absolute;
  width: 26px;
  height: 14px;
  left: 8px;
  top: 10px;
  color: var(--primary-dark);
  stroke-dashoffset: 34px;
  stroke-dasharray: 0 48px 19px 48px;
}
.order.animate .default {
  opacity: 0;
  transition-delay: 0s;
}
.order.animate .success {
  --y: 0;
  transition-delay: 3.85s;
}
.order.animate .success svg {
  transition-delay: 4.3s;
  stroke-dashoffset: 0;
}
.order.animate .drone {
  -webkit-animation: move 5s ease forwards;
          animation: move 5s ease forwards;
}
.order.animate .drone .wing {
  -webkit-animation: wing 5s linear forwards;
          animation: wing 5s linear forwards;
}
.order.animate .drone .grab {
  -webkit-animation: grab .6s ease forwards 2.3s;
          animation: grab .6s ease forwards 2.3s;
}
.order.animate .box {
  -webkit-animation: box 5s ease forwards;
          animation: box 5s ease forwards;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform: translateX(-7px) rotate(14deg);
            transform: translateX(-7px) rotate(14deg);
  }
  55%,
    70% {
    -webkit-transform: translateX(141px) rotate(0deg);
            transform: translateX(141px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(141px) translateY(-84px) rotate(0deg);
            transform: translateX(141px) translateY(-84px) rotate(0deg);
  }
}

@keyframes move {
  0% {
    -webkit-transform: translateX(-7px) rotate(14deg);
            transform: translateX(-7px) rotate(14deg);
  }
  55%,
    70% {
    -webkit-transform: translateX(141px) rotate(0deg);
            transform: translateX(141px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(141px) translateY(-84px) rotate(0deg);
            transform: translateX(141px) translateY(-84px) rotate(0deg);
  }
}
@-webkit-keyframes grab {
  100% {
    stroke-dashoffset: 48px;
    stroke-dasharray: 0 48px 48px 48px;
  }
}
@keyframes grab {
  100% {
    stroke-dashoffset: 48px;
    stroke-dasharray: 0 48px 48px 48px;
  }
}
@-webkit-keyframes wing {
  100% {
    -webkit-transform: rotateY(7200deg);
            transform: rotateY(7200deg);
  }
}
@keyframes wing {
  100% {
    -webkit-transform: rotateY(7200deg);
            transform: rotateY(7200deg);
  }
}
@-webkit-keyframes box {
  0%,
    10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  55%,
    70% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
  }
  100% {
    -webkit-transform: translateY(-112px);
            transform: translateY(-112px);
  }
}
@keyframes box {
  0%,
    10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  55%,
    70% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
  }
  100% {
    -webkit-transform: translateY(-112px);
            transform: translateY(-112px);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

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

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #121621;
}
</style>
<script>
$('.order').click(function(e) {

    let button = $(this);

    if(!button.hasClass('animate')) {
        button.addClass('animate');
        setTimeout(() => {
            button.removeClass('animate');
        }, 6500);
    }

});
</script>