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 v3.4. It is responsive. similar terms for this example are CTA,banner
Related Examples
-
10.5k -
Call to Action (for app stores)Download app section with Playstore and Appstore button
12.2k -
16.8k -
Previous Next ButtonsPagination buttons
15.4k -
Social buttonsMono-color Social buttons change colors according to your need
12.4k -
Get the app sectionPlay store and App store buttons
10.1k -
Button groupnice and simple buttons with a hover effect
8.6k -
11.1k -
-
-
Sharp corner button designbutton with hover effect
13.4k -
Browse by topic
Explore components by Tags
Jump straight to the UI pattern you need.
Can't find it?
Didn't find the component you were looking for?
Search across 3,000+ community-built components and grab the code in seconds.