Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions.
The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes.
The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.
This tailwind example is contributed by KULDEEP, on 20-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner
Author KULDEEP
Related Examples
-
3 years ago9.7k -
Call to Action (for app stores)Download app section with Playstore and Appstore button
3 years ago11.2k -
3 years ago15.7k -
Previous Next ButtonsPagination buttons
3 years ago14k -
Social buttonsMono-color Social buttons change colors according to your need
3 years ago11.7k -
Get the app sectionPlay store and App store buttons
2 years ago9.5k -
Button groupnice and simple buttons with a hover effect
2 years ago7.9k -
2 years ago10.5k -
2 years ago10.9k -
2 years ago10k -
Sharp corner button designbutton with hover effect
2 years ago12.2k -
2 years ago11k
Explore components by Tags
Didn't find component you were looking for?
Search from 3000+ components
