button.btn type="button"
	span.btn_text click me
.mover

span.link
	| Made with
	| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0H24V24H0z"/><path fill="#7f71fe" d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"/></svg>
	| by 
	a href="https://codepen.io/Anna_Batura/" target="_blank"  Anna Batura

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap')

\:root
  --mouse-x: -50px
  --mouse-y: -50px
  --mouse-btn-x: -50px
  --mouse-btn-y: -50px

html
  height: 100%

body
  font-family: sans-serif
  font-size: 14px
  height: 100%
  margin: 0
  display: flex
  align-items: center
  justify-content: center
  overflow: hidden
  font-family: 'Comfortaa', cursive
  background-color: #e5eaf0
  font-weight: 400

.svg-background
  position: absolute
  left: -20vw
  right: -20vw
  bottom: 0
  width: 140vw

a
  color: #7f71fe
  text-decoration: none
  font-weight: 700

.btn
  appearance: none
  outline: 0
  position: relative
  overflow: hidden
  display: inline-block
  text-align: center
  text-decoration: none
  vertical-align: middle
  cursor: pointer
  -webkit-user-select: none
  -moz-user-select: none
  user-select: none
  border: none
  letter-spacing: 3px
  line-height: 80px
  height: 80px
  width: 300px
  padding: 0 30px
  font-size: 32px
  font-weight: 600
  color: #fff
  background-color: #7f71fe
  border-radius: 5px
  transition: all 0.3s ease-in
  &_text
    pointer-events: none
    position: relative
    z-index: 2
  &:hover
    background-color: #0074e8

.link
  position: fixed
  bottom: 10px
  left: 0
  right: 0
  text-align: center
  font-size: 18px
  svg
    position: relative
    top: 5px
    margin: 0 4px

.mover
  pointer-events: none
  position: absolute
  top: 0
  left: 0
  margin-top: -10px
  margin-left: -10px
  border-radius: 50%
  left: var(--mouse-x)
  top: var(--mouse-y)
  height: 20px
  width: 20px
  background: rgba(255, 255, 255, 0.3)
  transform: scale(1.5)
  transition: all 0.1s ease-out
  z-index: 1
  &.active
    transform: scale(0.8)

.mouse
  pointer-events: none
  height: 30px
  width: 30px
  position: absolute
  left: var(--mouse-btn-x)
  top: var(--mouse-btn-y)
  .svg-2
    position: absolute
    width: 70px
    height: 70px
    top: -40px
    left: -40px
    opacity: 0.7
    path 
      stroke: #1A1D2C
      stroke: #A0C3F1
      stroke: #bdd5ff
      stroke-width: 3
      stroke-linecap: round
      stroke-dashoffset: 25%
      stroke-dasharray: 100%
      animation: svg2 1s linear forwards
    .svg_obj
      stroke-width: 5
      opacity: 0.5

@keyframes svg2 
  0%
    stroke-dashoffset: 100%
  50% 
    stroke-dashoffset: 0
  100% 
    stroke-dashoffset: -100%

//#cpc-click-button#codepenchallenge

let root = document.documentElement;
let mover = document.querySelector(".mover");
let link = document.querySelector(".btn");

root.addEventListener("mousemove", (e) => {
	root.style.setProperty("--mouse-x", e.clientX + "px");
	root.style.setProperty("--mouse-y", e.clientY + "px");
});

link.addEventListener("click", function (event) {
	event.preventDefault();
	let svg = `<svg class="svg-2" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.5 18.5V1.5" stroke-linejoin="bevel"/>
<path d="M18.5 26.5L1.5 26.5" stroke-linejoin="bevel"/>
<path d="M27.5 36.5V53.5" stroke-linejoin="bevel"/>
<path d="M36.5 26.5L53.5 26.5" stroke-linejoin="bevel"/>
<path class="svg_obj" d="M21.8787 22L12.6863 12.8076" stroke-linejoin="bevel"/>
<path class="svg_obj" d="M33 21.8789L42.1924 12.6865" stroke-linejoin="bevel"/>
<path class="svg_obj" d="M21 33.1211L11.8076 42.3135" stroke-linejoin="bevel"/>
<path class="svg_obj" d="M33.1213 33L42.3137 42.1924" stroke-linejoin="bevel"/>
</svg>`;

	let x = event.offsetX == undefined ? event.layerX : event.offsetX,
		y = event.offsetY == undefined ? event.layerY : event.offsetY;

	let span = document.createElement("span");
	span.className = "mouse";
	span.innerHTML = svg;
	s = span.style;
	s.top = y + "px";
	s.left = x + "px";
	var angle = Math.floor(Math.random() * 25) + "deg";
	s.transform = "rotate(" + angle + ")";
	this.appendChild(span);

	setTimeout(function () {
		span.remove();
	}, 1400);

	mover.classList.add("active");
	setTimeout(function () {
		mover.classList.remove("active");
	}, 250);
});