Copied!
It's on your clipboard.
You’ve been offline for 0 second. Please check your Internet connection.

Help Us Improve

Found an issue or have an idea? Let us know.
Select all that apply...
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Glide Over Button
Overview

A smooth button where the text and icon glide past each other on hover. The script measures each button’s label and icon widths after the page fully loads and uses those exact values to move them in perfect balance. The result is a clean, precise animation that feels effortless and polished.

Documentation
Need Help? Email Us
Setup: External Scripts
Language
Copy
Step 0: Copy structure to Elementor
Copy To Elementor
Step 0: Add HTML
Language
Copy
Step 0: Add custom CSS
Language
Copy
.ou-glide-over-bt {
  width: auto;
  overflow: hidden;
  transition: background-color 0.35s ease;
}

.ou-glide-over-label,
.ou-glide-over-icon {
  will-change: transform;
  transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

/* hover */
.ou-glide-over-bt:hover {
  background-color: #2A303F !important; /* button background */
}

.ou-glide-over-bt:hover .ou-glide-over-label .elementor-heading-title {
  color: #FEFEFD !important; /* text color */
}

.ou-glide-over-bt:hover .ou-glide-over-icon {
  background-color: #FEFEFD !important; /* icon background */
}

.ou-glide-over-bt:hover .ou-glide-over-icon svg path {
  fill: #2A303F !important; /* icon fill color */
}
Step 0: Add custom Javascript
Language
Copy
window.addEventListener("load", () => {
  if (document.body.classList.contains('elementor-editor-active')) return;

  document.querySelectorAll('.ou-glide-over-bt').forEach(button => {
    const label = button.querySelector('.ou-glide-over-label');
    const icon = button.querySelector('.ou-glide-over-icon');
    if (!label || !icon) return;

    const labelWidth = Math.floor(label.getBoundingClientRect().width);
    const iconWidth = Math.floor(icon.getBoundingClientRect().width);

    button.addEventListener('mouseenter', () => {
      label.style.transform = `translateX(${iconWidth}px)`;
      icon.style.transform = `translateX(-${labelWidth}px)`;
    });

    button.addEventListener('mouseleave', () => {
      label.style.transform = '';
      icon.style.transform = '';
    });
  });
});
Step 5: Add custom Javascript
Language
Copy
window.addEventListener("load", () => {
  if (document.body.classList.contains('elementor-editor-active')) return;

  document.querySelectorAll('.ou-glide-over-bt').forEach(button => {
    const label = button.querySelector('.ou-glide-over-label');
    const icon = button.querySelector('.ou-glide-over-icon');
    if (!label || !icon) return;

    const labelWidth = Math.floor(label.getBoundingClientRect().width);
    const iconWidth = Math.floor(icon.getBoundingClientRect().width);

    button.addEventListener('mouseenter', () => {
      label.style.transform = `translateX(${iconWidth}px)`;
      icon.style.transform = `translateX(-${labelWidth}px)`;
    });

    button.addEventListener('mouseleave', () => {
      label.style.transform = '';
      icon.style.transform = '';
    });
  });
});
Step 5: Implementation
Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.
Resorce Details
Resource
Componenets
Category
Buttons
Add-ons
Last Updated
October 30, 2025
Original Source
Watch Toturail