<button class='button' type='button'>
press to scan fingerprint
<svg xmlns="http://www.w3.org/2000/svg" id="OBJECTS" viewBox="0 0 103.051 102">
   <defs>
       <pattern id="gif" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none" xlink:href="https://media.giphy.com/media/dAWZiSMbMvObDWP3aA/giphy.gif" />
    </pattern>
  </defs>
  <g class="prints" stroke="#fff">
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.1 52.786s4.367-1.106 4.725-10.829 4.841-22.651 9.107-25.389"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M28.984 14.686S40.423-.54 66.58 4.026"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.173 11.689a43.984 43.984 0 00-19.836-3.077c-9.059.522-17.207 3.674-24.463 12.261-8.447 9.995-8.456 22.215-7.789 31.5.457 6.372-7.166 9.01-9.363 9.326"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M82.387 84.332a4.85 4.85 0 01-1.987-3.344c-.423-2.428 1.032-9.714 2.486-13.691s3.346-12.64 3.427-16.456a32.465 32.465 0 00-.624-6.964"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.383 18.957S86.59 26.26 88.491 39"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M72.031 17s-19.474-9.522-35.118 4.62"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M34.832 24.532s-2.749 3.991-2.5 4.091"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 32.956s-2.172 9.127-2.224 13.506a87 87 0 01-.422 10.347c-.352 1.971-2.323 7.827-11.826 11.129"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M16.845 74.418s6.676-3.673 8.717-5.643"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 62.637a10.878 10.878 0 003.454-6.445c.751-4.334-.281-8.932 0-12.217s1.231-15.111 11.08-20.836 21.055-3.191 25.636 0 10.717 8.937 11.236 18.045a58 58 0 01-2.214 17.947"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19.692 81.044s12.7-9.13 16.077-15.873 4.692-9.9 4.223-14.33-.351-12.689 2.722-17.885a17.446 17.446 0 0110.815-7.673"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.243 24.847a11.342 11.342 0 015.484.855"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M67.241 27.317s6.887 3.331 7.932 10.463 1.046 13.234-.643 18.02-6.224 20.672-7.289 23.851S63.976 97.159 68.83 99.1"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M78.178 65.209s-4.211 14.242-4.68 18.56-1.06 7.231 1.675 9.854"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M60.167 102.915s-2.767-3.358-2.884-10.887a31.772 31.772 0 013.732-14.923c.845-1.689 6.57-15.079 7.884-20.913s1.838-14.646.45-19.2-5.143-7-12.182-6.34S48.392 34.4 47.148 37.5s.165 9.87-.492 15.955S43 68.1 34.832 75.885 22.953 86.63 22.953 86.63"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M26.36 91.114s9.2-8.1 14.1-12.883 11.32-15.674 11.949-22.337-.887-11.87.117-14.71 3.046-5.468 6.049-5 5.529 1.5 5.768 7.977-3.516 17.926-3.516 17.926c-1.22 2.441-9.722 22.525-10.164 26.373"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M51.884 104.791s-2.1-6.2-1.974-9.762"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M40.274 100.944a20.083 20.083 0 010-8.916c1.1-4.97 4.412-8.916 6.335-11.638s7.537-10.418 9.658-19.522"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.34 43.109s.524 7.441-.891 13.068"/>
  </g>
  <g class="draw" stroke="url(#gif)">
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M13.1 52.786s4.367-1.106 4.725-10.829 4.841-22.651 9.107-25.389"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M28.984 14.686S40.423-.54 66.58 4.026"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.173 11.689a43.984 43.984 0 00-19.836-3.077c-9.059.522-17.207 3.674-24.463 12.261-8.447 9.995-8.456 22.215-7.789 31.5.457 6.372-7.166 9.01-9.363 9.326"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M82.387 84.332a4.85 4.85 0 01-1.987-3.344c-.423-2.428 1.032-9.714 2.486-13.691s3.346-12.64 3.427-16.456a32.465 32.465 0 00-.624-6.964"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M75.383 18.957S86.59 26.26 88.491 39"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M72.031 17s-19.474-9.522-35.118 4.62"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M34.832 24.532s-2.749 3.991-2.5 4.091"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 32.956s-2.172 9.127-2.224 13.506a87 87 0 01-.422 10.347c-.352 1.971-2.323 7.827-11.826 11.129"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M16.845 74.418s6.676-3.673 8.717-5.643"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M30.531 62.637a10.878 10.878 0 003.454-6.445c.751-4.334-.281-8.932 0-12.217s1.231-15.111 11.08-20.836 21.055-3.191 25.636 0 10.717 8.937 11.236 18.045a58 58 0 01-2.214 17.947"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19.692 81.044s12.7-9.13 16.077-15.873 4.692-9.9 4.223-14.33-.351-12.689 2.722-17.885a17.446 17.446 0 0110.815-7.673"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.243 24.847a11.342 11.342 0 015.484.855"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M67.241 27.317s6.887 3.331 7.932 10.463 1.046 13.234-.643 18.02-6.224 20.672-7.289 23.851S63.976 97.159 68.83 99.1"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M78.178 65.209s-4.211 14.242-4.68 18.56-1.06 7.231 1.675 9.854"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M60.167 102.915s-2.767-3.358-2.884-10.887a31.772 31.772 0 013.732-14.923c.845-1.689 6.57-15.079 7.884-20.913s1.838-14.646.45-19.2-5.143-7-12.182-6.34S48.392 34.4 47.148 37.5s.165 9.87-.492 15.955S43 68.1 34.832 75.885 22.953 86.63 22.953 86.63"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M26.36 91.114s9.2-8.1 14.1-12.883 11.32-15.674 11.949-22.337-.887-11.87.117-14.71 3.046-5.468 6.049-5 5.529 1.5 5.768 7.977-3.516 17.926-3.516 17.926c-1.22 2.441-9.722 22.525-10.164 26.373"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M51.884 104.791s-2.1-6.2-1.974-9.762"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M40.274 100.944a20.083 20.083 0 010-8.916c1.1-4.97 4.412-8.916 6.335-11.638s7.537-10.418 9.658-19.522"/>
  <path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M58.34 43.109s.524 7.441-.891 13.068"/>
  </g>
</svg>
</button>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f1f3f6;
}

.container {
  width: 100%;
  height: 97vh;
}

svg {
  width: 80%;
  filter: drop-shadow( -1px -1px 1px rgb(55, 84, 170, 0.2));
}

.draw {
  opacity: 0;
  transition: opacity ease-in-out 1s;
}

.prints {
  opacity: 0;
}

.button {
  position: relative;
  width: 120px;
  height: 120px;
  background: #f1f3f6;
  border-radius: 50%;
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170, 0), 
    inset 0 0 20px rgba(255, 255, 255, 0), 
    10px 10px 18px rgba(55, 84, 170, 0.15), 
    -10px -10px 22px white, 
    inset 0px 0px 4px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.7s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  font-size: 0;
}

.button:hover, .button:focus {
  box-shadow: inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.button:hover .draw {
  opacity: 0.4;
}
.button:hover .prints{
  opacity: 1;
  transition: opacity ease-in-out 0.8s;
}

.button:before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: #f1f3f6;
  border-radius: 50%;
  position: absolute;
  top: 110%;
  box-shadow: inset 2px 2px 5px rgba(55, 84, 170, 0.15), inset -2px -2px 5px white, 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.button:after {
  --color: #ff99ac;
  content: '';
  width: 3px;
  height: 3px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: calc(110% + 6px);
  z-index: 9999;
  box-shadow: inset 0px 0px 1px var(--color), 
    0px 0px 2px var(--color), 
    0px 0px 3px var(--color), 
    0px 0px 4px var(--color),
    0px 0px 5px var(--color),
    0px 0px 6px var(--color),
    0px 0px 7px var(--color),
    0px 0px 20px var(--color),
    0px 0px 15px var(--color);
  animation: flash 0.6s infinite alternate forwards;
  transition: box-shadow 0.7s ease-in-out 0.5s;
}

.button:hover:after {
  --color: aqua;
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
gsap.registerPlugin(DrawSVGPlugin);

const tl = gsap.timeline({paused: true});

tl.from('.prints > *',{
  duration: 1,
  drawSVG: "0%",
  ease: 'none',
  stagger: 0.1,
})
tl.from('.draw > *',{
  duration: 1,
  drawSVG: "0%",
  ease: 'none',
  stagger: 0.1,
}, '<1')

const button = document.querySelector('.button');

button.addEventListener("mouseenter",  (e) => {
  tl.restart()
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js