Home
Md. Tofayel islam
Hover Button

Hover Button

Hover button then a overlay came from bottom to top

This tailwind example is contributed by Md. Tofayel islam, on 17-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button Input Hover

Author Md. Tofayel islam

2.3k

Fork Fullscreen

<a href="#_" class="relative inline-flex items-center justify-start py-3 pl-4 pr-12 overflow-hidden font-semibold text-indigo-600 transition-all duration-150 ease-in-out rounded hover:pl-10 hover:pr-6 bg-gray-50 group">
      <span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-indigo-600 group-hover:h-full"></span>
      <span class="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
        <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </span>
      <span class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
        <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </span>
      <span class="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white">Button Text</span>
    </a>

Related Examples

Sharp corner button design
button with hover effect

Author:
Amit Pachange

3 years ago

12.8k
hospital
cares

Author:
Nirere Esther

10 months ago

925
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Author:
Md. Tofayel islam

2 years ago

4.5k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
Colored checkboxes
use custom accent color according to your design

Author:
Pixel Perfect

2 years ago

5.4k
Elevated Buton
On hover merge shadow

Author:
Anonymous

1 year ago

2.7k
FoodSwap
This template provides a fully responsive frontend for a food-trading platform.

Author:
INGRIDE MUZIRANENGE

10 months ago

1.2k
pasta
by salvator

Author:
Baraka Salvator

10 months ago

990
Floating pus button

Author:
Jaffar Hussain

1 year ago

1.8k
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

1 year ago

1.3k
Stacked Checkboxes

Author:
kishan pc

1 year ago

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

Author:
TailwindFlex

3 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components