Type to search… it’s not that hard.
Bummer… nothing matched that.
Info
A smooth button interaction where icons slide and swap with a soft fade, while the label subtly shifts.
Setup
00
Copy structure to Elementor
Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.
Copy To Elementor
Download JSON Template
Important
- Use Elementor 3.11 or above.
- Before copying, make sure all required widgets and features are active, including Elementor Pro widgets, Editor v4, and Flexbox Containers.
- Safari may block clipboard access, so Chrome or Firefox is recommended for smoothest copy/paste experience.
- If copy/paste fails, clear cache/cookies and disable any plugins or browser extensions that may interfere.
00
Add Custom CSS
Paste the code through the page or site settings, or add it via Elementor → Custom Code before body tag.
/* transition */
[data-oura-button-04="icon-1"],
[data-oura-button-04="icon-2"],
[data-oura-button-04="label"] {
transition:
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.3s ease-out;
}
/* default state */
[data-oura-button-04="icon-1"] {
transform: translateX(0);
opacity: 1;
}
[data-oura-button-04="icon-2"] {
transform: translateX(-50px);
opacity: 0;
}
[data-oura-button-04="label"] {
transform: translateX(0);
}
/* hover state */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
[data-oura-button-04="button"]:hover [data-oura-button-04="icon-1"] {
transform: translateX(50px);
opacity: 0;
}
[data-oura-button-04="button"]:hover [data-oura-button-04="icon-2"] {
transform: translateX(0);
opacity: 1;
}
[data-oura-button-04="button"]:hover [data-oura-button-04="label"] {
transform: translateX(30px);
}
}
/* on click */
[data-oura-button-04="button"] {
transition: transform 0.2s ease;
}
[data-oura-button-04="button"]:active {
transform: scale(0.94);
}00
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.