Type to search… it’s not that hard.
Bummer… nothing matched that.
Info
A smooth flip/flop button interaction in which one layer scales out while another scales in on hover, creating a clean, animated swap effect.
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.
/* transitions */
[data-oura-button-02="layer-1"],
[data-oura-button-02="layer-2"] {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-oura-button-02="layer-1"] > *,
[data-oura-button-02="layer-2"] > * {
transition: opacity 0.3s ease;
}
/* default */
[data-oura-button-02="layer-1"] {
transform: scale(1, 1);
}
[data-oura-button-02="layer-2"] {
transform: scale(0, 0);
}
[data-oura-button-02="layer-1"] > * {
opacity: 1;
}
[data-oura-button-02="layer-2"] > * {
opacity: 0;
}
/* hover */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
[data-oura-button-02="button"]:hover [data-oura-button-02="layer-1"] {
transform: scale(0, 0);
}
[data-oura-button-02="button"]:hover [data-oura-button-02="layer-2"] {
transform: scale(1, 1);
}
[data-oura-button-02="button"]:hover [data-oura-button-02="layer-1"] > * {
opacity: 0;
}
[data-oura-button-02="button"]:hover [data-oura-button-02="layer-2"] > * {
opacity: 1;
}
}
/* on click */
[data-oura-button-02="button"] {
transition: transform 0.2s ease;
}
[data-oura-button-02="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.