Menu button
This tailwind example is contributed by Freja Jensen, on 11-Feb-2023. Component is made with Tailwind v3.4. It is responsive.
Related Examples
-
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs
21.2k -
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center
26.4k -
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button
22.3k -
shadcn Button
button
3.1k -
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀
2k -
10.8k
-
Playstore Button
Download on the play store button
15.7k
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.