diff --git a/submissions/examples/liquid-wave-button-55580/README.md b/submissions/examples/liquid-wave-button-55580/README.md new file mode 100644 index 00000000000..4178201b19a --- /dev/null +++ b/submissions/examples/liquid-wave-button-55580/README.md @@ -0,0 +1,16 @@ +# Liquid Wave Button + +## What does this do? +Adds a liquid/wave hover effect to buttons. On hover, a pseudo-element fills the button from the bottom upwards like rising water, rotating to create a dynamic wave effect. + +## How is it used? +```html + +``` + +## Why does it fit EaseMotion CSS? +It provides a high-quality, pure CSS micro-animation that feels engaging and natural without relying on any JavaScript listeners. + +## Tech Stack +- HTML +- CSS (No JavaScript) diff --git a/submissions/examples/liquid-wave-button-55580/demo.html b/submissions/examples/liquid-wave-button-55580/demo.html new file mode 100644 index 00000000000..48c9746449c --- /dev/null +++ b/submissions/examples/liquid-wave-button-55580/demo.html @@ -0,0 +1,37 @@ + + + + + + Liquid Wave Button Demo + + + + + +
+ +
+ + diff --git a/submissions/examples/liquid-wave-button-55580/style.css b/submissions/examples/liquid-wave-button-55580/style.css new file mode 100644 index 00000000000..7948048c02d --- /dev/null +++ b/submissions/examples/liquid-wave-button-55580/style.css @@ -0,0 +1,27 @@ +.ease-btn-liquid { + position: relative; + overflow: hidden; + z-index: 1; + background-color: var(--ease-color-primary, #6366f1); + color: #fff; + border: none; + transition: color 0.4s ease; +} + +.ease-btn-liquid::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + width: 200%; + height: 200%; + background-color: rgba(255, 255, 255, 0.2); + transform: translate(-50%, 0) rotate(0deg); + border-radius: 40%; + z-index: -1; + transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.ease-btn-liquid:hover::after { + transform: translate(-50%, -100%) rotate(180deg); +}