UI // Payment Approval

index.html

<div class='cs-btn-container'>
  <div class='block'></div>
  <div class='cs-btn cs-stp-one'>
    <div class='cs-btn-content'>

      <div class='cs-copy-icon'>
        <p class='cs-btn-text'>PAY</p>
        <i class='cs-btn-icon' data-feather="credit-card"></i>
      </div>

      <div class='fingerprint-icon-container'>
        <div class='front fingerp-pos'>  
          <div class='fingerprint fingerprint-cosicon' id='fingerprint-i'>
            <svg xmlns="http://www.w3.org/2000/svg" width="378" height="402" fill="none" viewBox="0 0 378 418">
              <path class='path path-1' stroke-linecap="round" stroke-width="11" d="M378 264.5V192c0-28.837-6.562-56.141-18.275-80.5M104 28.093C130.199 13.998 160.166 6 192 6c51.862 0 98.766 21.226 132.5 55.464M6 264.5V192c0-49.83 19.595-95.084 51.5-128.475M335.5 328c0-20.758 5.5-118.492 5.5-135.217 0-23.144-5.257-45.058-14.64-64.609a149.6 149.6 0 00-28.218-40.16c-15.126-15.38-33.558-27.49-54.142-35.171M192 43.5c-25.502 0-49.507 6.419-70.495 17.732a149.583 149.583 0 00-37.25 28.437C58.697 116.47 43 152.79 43 192.783V320.5M301 190.642c0 12.228-7 157.681-7 172.858"/>
              <path class='path path-2' stroke-linecap="round" stroke-width="11" d="M290.291 143.406a109.42 109.42 0 00-20.643-29.361c-11.066-11.245-24.55-20.099-39.608-25.714M192 81.5c-18.656 0-36.217 4.693-51.57 12.964a109.419 109.419 0 00-27.25 20.791C94.483 134.848 83 161.402 83 190.642v93.375M81.5 314.5v39M255 386l1.926-63.65M260.5 285c3.5-30 3.5-86.485 3.5-94.546 0-11.156-2.54-21.718-7.074-31.142"/>
              <path class='path path-3' stroke-linecap="round" stroke-width="11" d="M157.935 127.047c10.142-5.453 21.742-8.547 34.065-8.547 20.076 0 38.232 8.211 51.29 21.456M120 367.5c1.175-28.845 0-162 0-177.046 0-5.128.537-10.13 1.557-14.954a71.514 71.514 0 019.262-23M158 196.801V243.5v-46.699zm0 0a34.348 34.348 0 019.414-23.693 34.187 34.187 0 018.5-6.534A33.619 33.619 0 01192 162.5c4.174 0 8.172.759 11.866 2.147a33.997 33.997 0 0112.354 8.081 34.39 34.39 0 016.439 9.228A34.414 34.414 0 01226 196.801V216.5M157 280l-1.5 104M223 251l-3 140.5M192.306 190.726L187 395.5"/>
            </svg>


          </div>
        </div>

        <div class='back fingerp-pos'>
          <div id='fingerprint-i-clone'></div>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- References Dribbble / Twitter -->
<div class='cs-ref'>
  <a class="cs-dribbble" href="https://dribbble.com/shots/11036755-UI-Payment-Approval" target="_blank">
    <div id='svgDribbble'></div>
  </a>
  <a class="cs-twitter" target="_blank" href="https://twitter.com/CosWiSe">
    <div id='svgTwitter'></div>
  </a>
</div>

script.js

// ICONS CALLBACK
feather.replace();

// SVGs
$('#svgDribbble').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #dribbble');
$('#svgTwitter').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #twitter');

// NEW CODE HERE

// Back Fingerprint Icon
$('#fingerprint-i').clone().prependTo('#fingerprint-i-clone');

// Active Button
var btnTwo = '100px';



$('.cs-stp-one').on('click', function() {

  // Step 1 > 2
  $(this).addClass('cs-stp-two').removeClass('cs-stp-one');

  // Resize button
  $(this).addClass('cs-btn-act');

  // Opacity content 1
  $('.cs-copy-icon').addClass('cs-copy-icon-op');

  // Opacity content 2
  $('.fingerprint-icon-container').addClass('icon-op-1');
});




// Hold
var iVerify = function() {
  $('.front .path ').addClass('fngerprint-i-act');
}

var Check = function() {
  $('.fingerprint-icon-container').removeClass('icon-op-1');
  $('.cs-copy-icon').delay(399).removeClass('cs-copy-icon-op');
  $('.cs-stp-two').removeClass('cs-btn-act').addClass('cs-btn-act-two');
  $('.cs-stp-two').addClass('cs-stp-three').removeClass('cs-stp-two');

  $('.cs-btn-text').text('Complete');
  $('.cs-btn-icon').css('display', 'none');
  $('.cs-btn-text').css('margin','0');
  $('.cs-btn-icon').css('margin','0');
  
  $('.block').css('display','block');
}

var iUnverify = function() {
  $('.path').animate({
    "stroke-dashoffset": 1000
  },4499);
}

var timeoutIdOne = 0;
var timeoutIdTwo = 0;


$('.fingerprint-icon-container').on('mousedown', function() {
  timeoutIdOne = setTimeout(iVerify, 1000);
  timeoutIdTwo = setTimeout(Check, 2500);
}).on('mouseup mouseleave', function() {
  clearTimeout(timeoutIdOne);
  clearTimeout(timeoutIdTwo);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

// IMPORT
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700,900');

// VARIABLES 
// $canvasBg: #f7f7f7; Grey
$canvasBg: #f1f3f9; // Bright #d5dbed

$textC: #333333;
$col1: #ff8c69;
$col2: ff696c;
$col3: #1462ff;
$col4: #f0f1f5;

$svgC: rgba(#929cd0, .8);
// $shadowC: #d1d4e1;
$shadowC: #d5dbed;
$shadowDef: 0 3px 20px -3px $shadowC;
$shadowDefTwo: 0 6px 30px -10px $shadowC;

// PLACEHOLDERS
%no-selection {
  // No selection
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;      
  user-select: none;    
}

// DEFAULT
html {
  display: flex;
  justify-content: center;
  align-items: center;
  background: $canvasBg;
  height: 100vh;
  font-family: 'Muli', Arial, sans-serif;
}

// SVGs
#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
  svg {
    display: block;
    width: 76px;
    height: 24px;
    fill: $svgC;
  }
}
#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
  svg {
    width: 24px;
    height: 24px;
    fill: $svgC;
  }
}

// NEW CODE HERE

// Variables
$col3s: #4a74c9;

$t: 249ms;
$cB: cubic-bezier(.63,.01,.26,1);
$cB2: cubic-bezier(.28,.01,0,.98);

// Icon Container 
.fingerprint-icon-container {
  position: absolute;
  width: auto;
  height: auto;
  top: -25.5px;
  left: -25.5px;
  opacity: 0;
  transition: opacity 249ms $cB;
}
.fingerp-pos {
  position: absolute;
}

// Fingerprint Icon
.fingerprint {
  width: 52px;
  height: auto;
  svg {
    width: 52px;
    height: auto;
  }
}
// Front Icon
.front .path {
  stroke: rgb(255,255,255);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

// Back Icon
.back .path {
  stroke: rgba(255,255,255,.5);
  stroke-dasharray: 0;
  stroke-dashoffset: 1000;
}

// Fingerprint Animation Delay
@for $i from 0 through 3 {
  .path-#{$i} {
    animation-delay: 699ms / $i;
  }
}

// Fingerprint Animation
@keyframes ver {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

// Container 
.cs-btn-container {
  position:relative;  
}

// Block
.block {
  width: 170px;
  height: 50px;
  background: transparent;
  position: absolute;
  z-index: 9;
  display: none;
}

// Button
.cs-btn {
  // width: 170px;
  // height: 50px;
  background: lighten($col3, 0%);
  // background: lighten($col3, 10%);
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  cursor: pointer;
  box-shadow: 0 6px 30px -10px rgba($col3s, 1);
  @extend %no-selection;
  transition: background $t*2 $cB;
}

%btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  opacity: 1;
}

.cs-btn-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  opacity: 1;
}

.cs-copy-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  opacity: 1;
  transition: opacity 449ms $cB;
}

.cs-btn-text {
  font-size: 1.2em;
  color: #fff;
  margin: 0 10px 0 0;
}

.cs-btn-icon {
  color: #fff;
  width: 20px; 
  margin: 2px 0 0 10px;
  display: block;
}
.cs-checked-icon {
  display: none;
}

// Behaviours

// Button
.cs-btn:hover {
  background: lighten($col3, 10%);
  transition: background $t $cB;
}

.cs-stp-one {
  width: 170px;
  height: 50px;
}

.cs-stp-one {
  width: 170px;
  height: 50px;
}

.cs-stp-two {
  width: 75px;
  height: 75px;
}

.cs-stp-three {
  width: 170px;
  height: 50px;
}

.cs-btn-act {
  animation: btn-act-one 299ms $cB forwards;
}

.cs-btn-act-two {
  animation: btn-act-two 299ms $cB forwards;
}

@keyframes btn-act-one {
  0% { width: 170px; height: 50px; }
  100% { width: 75px; height: 75px; }
}

@keyframes btn-act-two {
  0% { width: 75px; height: 75px; }
  100% { width: 170px; height: 50px; }
}

// Content Copy+Icon
.cs-copy-icon-op {
  opacity: 0;
  transition: opacity 249ms $cB;
}

// Fingerprint Icon
.icon-op-1 {
  opacity: 1;
  transition: opacity 249ms $cB;
}

.fngerprint-i-act {
  animation: ver 6499ms $cB2 forwards 99ms;
}
// Checked
.cs-checked {
  @extend %btn-wrap;
  opacity: 0;
  & > * {
    color: #fff;
  }
}

ui-payment-approval.markdown

UI // Payment Approval

A Pen by Saijo George on CodePen.

License.