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.
Copied!
It's on your clipboard.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Components
Wireframes
No items found.
Basics
Oops, nothing here...
Scroll
Esc
Overview
Setup: External Scripts
Step 0: Copy structure to Elementor
Copy To Elementor
Step 0: Add HTML
Step 0: Add custom CSS
.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
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
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.
