Home
Sophia Baker
Buttons popup on hover

Buttons popup on hover

Popup buttons on hover

This tailwind example is contributed by Sophia Baker, on 20-Jan-2023. Component is made with Tailwind CSS v3.

14.5k

<div class="flex flex-col w-full sm:w-auto sm:flex-row p-4">
    <a href=""
        class="flex flex-row items-center justify-center w-full px-4 py-4 mb-4 text-sm font-bold bg-green-300 leading-6 capitalize duration-100 transform rounded-sm shadow cursor-pointer focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none sm:mb-0 sm:w-auto sm:mr-4 md:pl-8 md:pr-6 xl:pl-12 xl:pr-10   hover:shadow-lg hover:-translate-y-1">
        Create my account
        <span class="ml-4">
            <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" class="w-5 h-5 fill-current"><path fill="currentColor" d="M17.92,11.62a1,1,0,0,0-.21-.33l-5-5a1,1,0,0,0-1.42,1.42L14.59,11H7a1,1,0,0,0,0,2h7.59l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5-5a1,1,0,0,0,.21-.33A1,1,0,0,0,17.92,11.62Z"></path>
            </svg>
        </span>
    </a>

<a href=""
        class="flex items-center justify-center w-full px-4 py-4 text-sm font-bold leading-6 capitalize duration-100 transform border-2 rounded-sm cursor-pointer border-green-300 focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 focus:outline-none sm:w-auto sm:px-6 border-text  hover:shadow-lg hover:-translate-y-1">
        See Features
    </a>
</div>

Related Examples

View More Button

Author:
Amit Pachange

3 years ago

19.6k
Button with Bouncing Animation

Author:
Prashant

3 years ago

14.6k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

40.4k
Elevated buttons

Author:
Leon Bachmann

3 years ago

14.6k
Glowing gradient button
Button on black background

Author:
Leon Bachmann

3 years ago

39.4k
Buttons with border bottom

Author:
Prashant

3 years ago

12.8k
Buttons with shadow

Author:
Leon Bachmann

3 years ago

12.4k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.8k
Glowing gradient button
Button on black background

Author:
Md. Abu Taher

2 years ago

12.6k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

3 years ago

10.8k
Contact Spinner
Contact button spinning

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.6k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

5 months ago

380

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components