Hover State

Applied when the user's pointer (mouse) is over an element

How It Works

Trigger Condition

User hovers mouse over the element

Syntax Pattern

hover:{property}-{value}

Common Uses

  • Interactive buttons and links
  • Card hover effects
  • Navigation items
  • Image galleries

Best Practices

  • Use subtle transitions (0.2s - 0.3s)
  • Maintain sufficient color contrast
  • Provide visual feedback without being distracting
  • Ensure hover effects work on touch devices

Live Demo

Hover Area
Group Hover
Tooltip appears on hover

Hover over elements to see effects

Code Implementation

<!-- Basic hover example -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg 
         hover:bg-blue-700 hover:scale-105 
         hover:shadow-lg transition duration-300">
    Hover Me
</button>

<!-- Group hover example -->
<div class="group cursor-pointer">
  <div class="px-4 py-2 bg-gray-200 rounded-lg 
           group-hover:bg-green-500 group-hover:text-white 
           transition duration-300">
    Group Hover
  </div>
  <div class="opacity-0 group-hover:opacity-100 ...">
    Tooltip appears
  </div>
</div>

Focus State

Applied when element receives focus (keyboard navigation or click)

Live Demo

Click/Tab to Focus
Link 1 Link 2

Try: Click elements or use Tab key to navigate

Current focus: None

How It Works

Trigger Condition

Element receives focus via Tab key or click

Syntax Pattern

focus:{property}-{value}

Accessibility Importance

Essential for keyboard navigation users

Code Implementation

<!-- Input with focus styles -->
<input type="text"
       class="border border-gray-300 rounded-lg
              focus:border-blue-500 
              focus:ring-2 focus:ring-blue-200
              focus:outline-none transition"
       placeholder="Enter text...">

<!-- Button with focus ring -->
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg
         focus:outline-none 
         focus:ring-2 focus:ring-purple-300 
         focus:ring-offset-2">
    Click Me
</button>

Common Mistake

Never remove outline without providing alternative focus styles. Use focus:outline-none together with focus:ring or other visible styles.

Ring Utility

Creates focus rings and attention indicators around elements

Ring Properties

Ring Width

ring-1
ring-2
ring-4

Ring Offset

Creates space between element and ring

ring-offset-2
ring-offset-4

Ring vs Outline

  • Ring: Customizable width, color, and offset
  • Outline: Browser default, limited styling
  • Use Ring for consistent, branded focus indicators

Interactive Demo

Click to Activate

Ring Colors

Active + Focus Combination

Click and hold to see active state

Complete Ring Implementation

<!-- Basic ring -->
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">
  Basic Ring
</button>

<!-- Ring with offset -->
<button class="focus:outline-none 
         focus:ring-2 focus:ring-green-500 
         focus:ring-offset-2">
  With Offset
</button>

<!-- Custom ring color -->
<button class="focus:outline-none 
         focus:ring-2 focus:ring-red-500 
         focus:ring-offset-2 focus:ring-offset-white">
  Custom Color
</button>

Active State

Applied while element is being activated (mouse down or touch)

Click & Hold Demo

Click and Hold Elements

Click and hold the green box

Watch it rotate and scale

All States Combined

Try: Hover, then click, then focus with Tab

Active State Details

Trigger Condition

Mouse button down or touch press on element

Syntax Pattern

active:{property}-{value}

Mobile Consideration

On touch devices, active state shows while touching

Active State Examples

<!-- Button with active state -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg
         active:bg-blue-800 active:scale-95 
         transition duration-150">
  Click Me
</button>

<!-- Combined states example -->
<button class="bg-indigo-600 text-white px-4 py-2 rounded-lg
         hover:bg-indigo-700
         active:bg-indigo-800 active:scale-98
         focus:outline-none focus:ring-2 focus:ring-indigo-300
         transition duration-200">
  Interactive Button
</button>

Timing Considerations

  • Active state: Typically very short (100-200ms)
  • Use fast transitions for instant feedback
  • Subtle effects: scale-95 to scale-98 (5% max)
  • Combine with hover for smooth experience

State Comparison & Flow

Understanding when each state triggers and their typical use cases

State Trigger Flow

Hover State

Mouse pointer over element

Active State

Mouse down or touch press

Focus State

Tab key navigation or click

State Trigger Duration Common Uses Example Classes
Hover Mouse pointer over element 200-300ms transitions Buttons, cards, navigation hover:bg-blue-700
Focus Keyboard tab or click Until loses focus Forms, buttons, links focus:ring-2 focus:ring-blue-500
Active Mouse down / touch press 100-200ms Buttons, toggles active:scale-95

Complete Interactive Component

This button demonstrates all interactive states working together. 

<button class="px-6 py-4 bg-gradient-to-r from-blue-600 to-cyan-600 
         text-white font-bold rounded-xl
         hover:from-blue-700 hover:to-cyan-700 
         hover:shadow-lg hover:-translate-y-0.5
         active:from-blue-800 active:to-cyan-800 
         active:translate-y-0 active:shadow-inner
         focus:outline-none focus:ring-2 focus:ring-cyan-400 
         focus:ring-offset-2 focus:ring-offset-gray-900
         transition duration-300 ease-in-out">
  Launch Application
</button>