Home
Dika Rahman
Onhover underline effect

Onhover underline effect

This tailwind example is contributed by Dika Rahman, on 23-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Hover Animation

Author Dika Rahman

Fork Fullscreen

<div class="space-y-4">
    <div class="flex justify-center gap-2 bg-gray-100/50 rounded-xl p-4 font-semibold">
        <a class="p-2 px-4 group" href="#">
            About
            <div class="bg-teal-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
        </a>
        <a class="p-2 px-4 group" href="#">
            Services
            <div class="bg-teal-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
        </a>
        <a class="p-2 px-4 group" href="#">
            Contact
            <div class="bg-teal-500 h-[2px] w-0 group-hover:w-full transition-all duration-500"></div>
        </a>
    </div>

<div class="flex justify-center gap-2 bg-gray-100/50 rounded-xl p-4 font-semibold">
        <a class="p-1 px-4 group relative" href="#">
            <span class="text-gray-800">About</span>
            <div
                class="absolute bottom-0 left-0 bg-teal-500 h-0 w-full transition-all duration-500 group-hover:h-[2px]">
            </div>
        </a>
        <a class="p-1 px-4 group relative" href="#">
            <span class="text-gray-800">Services</span>
            <div
                class="absolute bottom-0 left-0 bg-teal-500 h-0 w-full transition-all duration-500 group-hover:h-[2px]">
            </div>
        </a>
        <a class="p-1 px-4 group relative" href="#">
            <span class="text-gray-800">Contact</span>
            <div
                class="absolute bottom-0 left-0 bg-teal-500 h-0 w-full transition-all duration-500 group-hover:h-[2px]">
            </div>
        </a>
    </div>
</div>

Related Examples

Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

4 months ago

1.1k
Feature Card

Author:
Md. Tofayel islam

2 months ago

304
Elevated Buton
On hover merge shadow

Author:
Anonymous

3 months ago

771
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

4 weeks ago

170
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

14.8k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

4 months ago

525
background animation
background animation

Author:
Anonymous

1 year ago

37.1k
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

1 month ago

187
Animated button
on hover underline will go from left to right

Author:
Anonymous

8 months ago

2.5k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

16.1k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

1 year ago

10k
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

8 months ago

4.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components