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.3k -
Call to Action (for app stores)Download app section with Playstore and Appstore button
2 years ago10.8k -
3 years ago15.2k -
Previous Next ButtonsPagination buttons
2 years ago13.6k -
Social buttonsMono-color Social buttons change colors according to your need
2 years ago11.2k -
Get the app sectionPlay store and App store buttons
2 years ago9.1k -
Button groupnice and simple buttons with a hover effect
2 years ago7.5k -
2 years ago10.3k -
2 years ago10.5k -
2 years ago9.6k -
Sharp corner button designbutton with hover effect
2 years ago11.9k -
2 years ago10.8k
Explore components by Tags
Didn't find component you were looking for?
Search from 2400+ components
