Колеблющаяся кнопка - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<button>

	<span class="text">✨ hover me ✨</span>

	<svg viewBox="0 0 100 50" preserveAspectRatio="none">

		<defs>

			<filter id="shadow" filterUnits="userSpaceOnUse" height="200%" width="200%" y="-50%" x="-50%">

				<feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#17BBAB" flood-opacity="0.4" />

			</filter>



			<filter id="border" filterUnits="userSpaceOnUse" height="200%" width="200%" y="-50%" x="-50%">

				<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1.2"></feMorphology>



				<feFlood flood-color="#fff" flood-opacity="1" result="WHITE"></feFlood>

				<feComposite in="WHITE" in2="DILATED" operator="in" result="OUTLINE"></feComposite>



				<feMerge>

					<feMergeNode in="OUTLINE" />

					<feMergeNode in="SourceGraphic" />

				</feMerge>

			</filter>

		</defs>

		<g class="focus">

			<polyline stroke="#17bbab" id="wibble" fill="none" stroke-width="40" stroke-linecap="round" stroke-linejoin="round" />

		</g>

	</svg>

</button>



<p class="footer"><span class="cursive">inspired by </span><a class="small" href="https://greensock.com/forums/topic/27839-liquid-button-using-gsap-library/">this GSAP thread...</a></p>

body {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #d0f0ed;

  overflow: hidden;

  padding: 0;

  margin: 0;

}



button {

  position: relative;

  outline: none;

  border: none;

  border-radius: 99px;

  padding: 1rem 2rem;

  background-color: transparent;

  overflow: visible;

  color: white;

  opacity: 0;

  font-family: "Dosis", sans-serif;

}



#wibble {

  filter: url(#shadow);

}



button:focus .focus {

  filter: url(#border);

}



button span {

  position: relative;

  z-index: 2;

  font-size: var(--step-0);

}



svg {

  position: absolute;

  top: 50%;

  right: 0;

  left: 15%;

  width: 75%;

  transform: translateY(-46%);

  z-index: 1;

  overflow: visible;

  pointer-events: none;

}



.footer {

  position: absolute;

  bottom: 0;

  left: 0;

  padding: 1rem;

  color: var(--dark);

  margin: 0;

}

.footer a {

  color: var(--dark);

  text-decoration: none;

  border-bottom: solid 1px var(--dark);

}

.footer p {

  margin: 0;

}

let svg = document.querySelector("svg");

let wibble = document.querySelector("#wibble");

let width = 100;

let pointz = 30;

let spacing = width / pointz;

let pointzArray = [];

let mySplitText = new SplitText(".text", { type: "chars" });

let chars = mySplitText.chars;

let amplitude = 10;

let duration = 0.4;



function staggerText(direction) {

  gsap.to(chars, {

    duration: duration / 3,

    y: amplitude * -1,

    ease: "Sine.easeInOut",

    stagger: {

      amount: duration / 3,

      yoyo: true,

      repeat: 1,

      from: direction } });





}



for (var i = 0; i < pointz; i++) {if (window.CP.shouldStopExecution(0)) break;

  let position = i / (pointz - 1);



  let point = wibble.points.appendItem(svg.createSVGPoint());



  point.x = i * spacing;

  point.y = 25;



  pointzArray.push(point);

}window.CP.exitedLoop(0);



let button = document.querySelector("button");

gsap.set(button, { opacity: 1 });

let isAnimating = false;

let reservedArray = [...pointzArray].reverse();



button.addEventListener("mouseenter", e => {

  if (isAnimating === true) return;



  let buttonCoords = button.getBoundingClientRect();

  let middle = buttonCoords.left + buttonCoords.width / 2;

  let leftSide = e.clientX < middle;



  if (leftSide) {

    staggerText("start");

    wibbleButton(reservedArray);

  } else {

    staggerText("end");

    wibbleButton(pointzArray);

  }



  isAnimating = true;

});



function wibbleButton(array) {

  array.forEach((point, index) => {

    let mapper = gsap.utils.mapRange(0, pointz, 0, 0.4);



    if (index === 0) {

      gsap.

      to(point, {

        keyframes: [

        { y: `+=${amplitude}`, ease: "Sine.easeInOut" },

        { y: `-=${amplitude * 2}`, ease: "Sine.easeInOut" },

        { y: `+=${amplitude}`, ease: "Sine.easeInOut" }],



        yoyo: true,

        duration: duration,

        onComplete: () => {

          isAnimating = false;

        } }).



      progress(mapper(index));

    } else {

      gsap.

      to(point, {

        keyframes: [

        { y: `+=${amplitude}`, ease: "Sine.easeInOut" },

        { y: `-=${amplitude * 2}`, ease: "Sine.easeInOut" },

        { y: `+=${amplitude}`, ease: "Sine.easeInOut" }],



        yoyo: true,

        duration: duration }).



      progress(mapper(index));

    }

  });

}

//# sourceURL=pen.js