Copied SVG to clipboard
Something went wrong
Copied code to clipboard
Something went wrong

Default

User image

Default

Name

  • Osmo Discount
    -25%
The Vault/

Directional Button Hover

Directional Button Hover

Documentation

Webflow

Code

Setup: External Scripts

External Scripts in Webflow

Make sure to always put the External Scripts before the Javascript step of the resource.

In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?

HTML

Copy

Step 1: Copy structure to Webflow

Copy structure to Webflow

In the video below we described how you can copy + paste the structure of this resource to your Webflow project.

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy
<div class="btn-wrap">
  <a href="#" data-theme="dark" data-btn-hover="" class="btn w-inline-block">
    <div class="btn__bg"></div>
    <div class="btn__circle-wrap">
      <div class="btn__circle">
        <div class="before__100"></div>
      </div>
    </div>
    <div class="btn__text">
      <p class="btn-text-p">Hover these</p>
    </div>
  </a>
  <a data-theme="light" data-btn-hover="" href="#" class="btn w-inline-block">
    <div class="btn__bg"></div>
    <div class="btn__circle-wrap">
      <div class="btn__circle">
        <div class="before__100"></div>
      </div>
    </div>
    <div class="btn__text">
      <p class="btn-text-p">Directional</p>
    </div>
  </a>
  <a data-theme="primary" data-btn-hover="" href="#" class="btn w-inline-block">
    <div class="btn__bg"></div>
    <div class="btn__circle-wrap">
      <div class="btn__circle">
        <div class="before__100"></div>
      </div>
    </div>
    <div class="btn__image"><img width="72" loading="eager" alt="Photo of Founder" src="" class="img__founder"></div>
    <div class="btn__text">
      <p class="btn-text-p">Buttons</p>
    </div>
  </a>
</div>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy
.btn {
  cursor: pointer;
  border-radius: 1em;
  border-radius: calc(var(--btn-height) * .5);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 3em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  text-decoration: none;
  display: flex;
  position: relative;
}

.btn__text {
  color: #efede3;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-text-p {
  color: currentColor;
  white-space: nowrap;
  margin-bottom: 0;
  padding-bottom: .05em;
  font-family: PP Neue Montreal, Arial, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
}

.btn__bg {
  background-color: #08181b;
  border-radius: 1.5em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btn__image {
  border-radius: 50%;
  width: 2.25em;
  height: 2.25em;
  margin-left: -.75em;
  margin-right: .5em;
  position: relative;
  overflow: hidden;
}

.img__founder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.btn__circle-wrap {
  border-radius: 1.5em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.btn__circle {
  pointer-events: none;
  background-color: #d1fd88;
  border-radius: 50%;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
  background-color: #D1FD88;
}

.before__100 {
  padding-top: 100%;
  display: block;
}

.btn .btn__text {
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn:hover .btn__circle {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

/* Dark */
.btn[data-theme="dark"] .btn__circle {
  background-color: #D1FD88;
}

.btn[data-theme="dark"]:hover .btn__text {
  color: #031819;
}

/* Light */
.btn[data-theme="light"] .btn__bg {
  background-color: #EFEDE3
}

.btn[data-theme="light"] .btn__text {
  color: #031819;
}

.btn[data-theme="light"] .btn__circle {
  background-color: #9FCCC8;
}

/* Primary */
.btn[data-theme="primary"] .btn__bg {
  background-color: #D1FD88;
}

.btn[data-theme="primary"] .btn__text {
  color: #031819;
}

.btn[data-theme="primary"] .btn__circle {
  background-color: #b8ec6f;
}

Step 2: Add custom Javascript

Custom Javascript in Webflow

In this video, Ilja gives you some guidance about using JavaScript in Webflow:

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy
function initDirectionalButtonHover() {
  // Button hover animation
  document.querySelectorAll('[data-btn-hover]').forEach(button => {
    button.addEventListener('mouseenter', handleHover);
    button.addEventListener('mouseleave', handleHover);
  });

  function handleHover(event) {
    const button = event.currentTarget;
    const buttonRect = button.getBoundingClientRect();

    // Get the button's dimensions and center
    const buttonWidth = buttonRect.width;
    const buttonHeight = buttonRect.height;
    const buttonCenterX = buttonRect.left + buttonWidth / 2;
    const buttonCenterY = buttonRect.top + buttonHeight / 2;

    // Calculate mouse position
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    // Offset from the top-left corner in percentage
    const offsetXFromLeft = ((mouseX - buttonRect.left) / buttonWidth) * 100;
    const offsetYFromTop = ((mouseY - buttonRect.top) / buttonHeight) * 100;

    // Offset from the center in percentage
    let offsetXFromCenter = ((mouseX - buttonCenterX) / (buttonWidth / 2)) * 50;

    // Convert to absolute values
    offsetXFromCenter = Math.abs(offsetXFromCenter);

    // Update position and size of .btn__circle
    const circle = button.querySelector('.btn__circle');
    if (circle) {
      circle.style.left = `${offsetXFromLeft.toFixed(1)}%`;
      circle.style.top = `${offsetYFromTop.toFixed(1)}%`;
      circle.style.width = `${115 + offsetXFromCenter.toFixed(1) * 2}%`;
    }
  }
}

// Initialize Directional Button Hover
document.addEventListener('DOMContentLoaded', function() {
  initDirectionalButtonHover();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

Custom CSS in Webflow

Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:

CSS

Copy
.btn .btn__text {
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn .btn__circle {
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
  background-color: #D1FD88;
}

.btn:hover .btn__circle {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

/* Dark */
.btn[data-theme="dark"] .btn__circle {
  background-color: #D1FD88;
}

.btn[data-theme="dark"]:hover .btn__text {
  color: #031819;
}

/* Light */
.btn[data-theme="light"] .btn__bg {
  background-color: #EFEDE3
}

.btn[data-theme="light"] .btn__text {
  color: #031819;
}

.btn[data-theme="light"] .btn__circle {
  background-color: #9FCCC8;
}

/* Primary */
.btn[data-theme="primary"] .btn__bg {
  background-color: #D1FD88;
}

.btn[data-theme="primary"] .btn__text {
  color: #031819;
}

.btn[data-theme="primary"] .btn__circle {
  background-color: #b8ec6f;
}

Resource Details

Button
Directional
Hover
Bubble
Animation

Original source

Dennis Snellenberg

Creator Credits

We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.