Type to search… it’s not that hard.
Bummer… nothing matched that.
Info
A simple button interaction where the first layer slides and rotates out while the second layer moves in from the opposite side.
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-06="button"],
[data-oura-button-06="label-1"],
[data-oura-button-06="label-2"] {
will-change: transform;
transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-oura-button-06="label-1"],
[data-oura-button-06="label-2"] {
transform-origin: bottom center;
}
/* default */
[data-oura-button-06="label-1"] {
transform: translateX(0%) translateY(0%);
}
[data-oura-button-06="label-2"] {
transform: translateX(-120%) translateY(60%);
}
/* hover */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
[data-oura-button-06="button"]:hover [data-oura-button-06="label-1"] {
transform: translateX(120%) translateY(60%);
}
[data-oura-button-06="button"]:hover [data-oura-button-06="label-2"] {
transform: translateX(0%) translateY(0%);
}
}
/* click */
[data-oura-button-06="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.