Skip to content

Instantly share code, notes, and snippets.

@wassim93

wassim93/button-animation.html

Last active October 29, 2023 14:16
Show Gist options
  • Save wassim93/6816b28a3eb05543e18a088b5a2fd1ca to your computer and use it in GitHub Desktop.
Save wassim93/6816b28a3eb05543e18a088b5a2fd1ca to your computer and use it in GitHub Desktop.
Download ZIP
fill cup animation button tailwind
Raw
button-animation.html
<button className="relative rounded-md overflow-hidden outline group">
<a href="#contact" className="relative z-10 block py-2 px-4 text-white transition-all duration-700 ">
Let's Talk
</a>
<span className="absolute top-0 left-0 h-full bg-[#915eff] w-0 transition-all duration-700 group-hover:w-full">
<div className="cup-fill animate-cup-fill"></div>
</span>
</button>
Raw
style.css
@keyframes cup-fill {
0% {
transform: scaleY(0);
}
100% {
transform: scaleY(1);
}
}
.cup-fill {
transform-origin: top;
transform: scaleY(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment