Squarespace Trick 101: Adding this cool animated call-to-action button

We came across this really cool call-to-action button created by Mariusz Dabrowski called the “Call to Action Hype Man”.

Call to Action Hype Man.gif

We think a user on your website would love it! We instantly got hooked when we used it!

To implement this fun call-to-action button on your Squarespace site, perform the steps below:

  1. Copy the following script tag into your Global Header of your website (Settings > Advanced > Code Injection)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.7/lottie.min.js" type="text/javascript"></script>
  2. Go to the page where you would like to add the call-to-action button

  3. Edit the page and add a Code Block to where you would like the button to display

  4. Copy the code the below into the code block and make the adjustments as you require:

    <div class="zone">
      <button onclick="document.location.href = 'tel:<enter telephone number here>">
        <span class="bodymovin"></span>
        <span class="text">CALL US TODAY</span>
      </button>
    </div>
    <style>
    html,
    body {
      height: 100%;
    }
    button {
      border: 0;
      position: relative;
      padding: 0;
      cursor: pointer;
      background: transparent;
      outline: none;
    }
    .bodymovin {
      width: 62px; /* 310 */
      height: 34px; /* 170 */
      position: absolute;
      top: -29px;
      right: 4%;
      z-index: 0;
      pointer-events: none;
      transition: transform 0s;
    }
    .bodymovin--hidden {
      transform: translateY(30px);
      transition: transform 0.55s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }
    .text {
      position: relative;
      padding: 15px 34px;
      color: #000;
      /*font-size: 16px;*/
      font-weight: 600;
      display: block;
      background: #fff;
      border-radius: 3px;
      transition: background 0.2s ease-in-out;
    }
    button:hover .text {
      background: #000;
      color: #fff;
    }
    </style>
    <script type="text/javascript">
    const bodymovinDiv = document.querySelector('.bodymovin');
    const zone = document.querySelector('.zone');
    let animationRunning = false;
    const animData = {
        container: bodymovinDiv,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/49240/stick-man.json'
    };
    const anim = lottie.loadAnimation(animData);
    anim.setSpeed(2.6);
    zone.addEventListener('mouseenter', mouseEnter);
    zone.addEventListener('mouseleave', mouseLeave);
    function mouseEnter() {
      if (!animationRunning) {
        animationRunning = true;
        bodymovinDiv.classList.remove('bodymovin--hidden');
        anim.loop = false;
        anim.setDirection(1);
        anim.playSegments([0, 8], true);
        anim.addEventListener('complete', startLoop);
      }
    }
    function mouseLeave() {
      // anim.stop();
      bodymovinDiv.classList.add('bodymovin--hidden');
      animationRunning = false;
      anim.removeEventListener('complete', startLoop); // If we leave before the loop starts we want to make sure to clear it
    }
    function startLoop() {
      anim.loop = true;
      anim.removeEventListener('complete', startLoop)
      anim.playSegments([9, 13], true);
    }
    </script>
  5. Click Apply

  6. Save the page

  7. And you should see your cool and fun call-to-action button

Web Design by Anthony - CallToAction.gif

Become a subscriber to CodePen as they have some amazing designers and developers on their creating some cool and amazing things!