State
- Master the core UI states for interactive web elements.
Hover State
What Is Hover State ?
The Hover State represents the condition of an element when the user places the mouse pointer over it.
It is the first level of interaction feedback in desktop-based interfaces.
Hover state answers the question:
“Is this element interactive or clickable?”
Why Hover State Matters
Hover state helps users instantly understand:
What can be clicked
What is interactive
What element is currently being explored
Without hover:
Users hesitate before clicking
UI feels static
Interactive elements are unclear
Hover creates confidence before action.
Common Hover Use Cases
Hover state is commonly applied to:
Buttons
Links
Cards
Icons
Navigation items
Dropdown triggers
Visual Changes in Hover State
Typical hover feedback includes:
Background color change
Text color change
Border highlight
Shadow or elevation
Slight scale or movement
Cursor change
Hover feedback should be:
Subtle
Fast
Predictable
Hover State in Traditional CSS (Concept)
button:hover {
background-color: blue;
}
Hover is applied using the :hover pseudo class.
Hover State in Tailwind CSS
In Tailwind, hover is handled using state variants.
<button class="bg-blue-500 hover:bg-blue-600 text-white">
Submit
</button>
Key idea:
bg-blue-500 → default state
hover:bg-blue-600 → hover state
Important Hover Design Rules
Hover should never be the only feedback
Hover should not conflict with focus state
Hover should be disabled on disabled elements
Hover effects should not be dramatic or distracting
Hover State Limitations
Hover:
Does not work on touch-only devices
Should never carry critical information alone
Hover is supportive, not essential feedback.
Focus State
What is Focus State?
The Focus State represents the condition of an element when it receives keyboard focus.
Focus is triggered by:
Tab key navigation
Clicking into inputs
Programmatic focus (JavaScript)
Focus answers:
“Where am I right now ?”
Why Focus State Is Critical
Focus state is non-negotiable for accessibility.
It is essential for:
Keyboard users
Screen reader users
Power users
Form navigation
Without focus:
Keyboard navigation becomes impossible
Accessibility standards fail
UI becomes unusable for many users
Common Elements That Need Focus
Buttons
Links
Input fields
Textareas
Dropdowns
Custom components
Visual Indicators of Focus
Common focus styles include:
Outline
Ring
Border highlight
Glow or shadow
Focus must be:
Clearly visible
High contrast
Consistent
CSS vs Tailwind Focus
Shows focus styling using both traditional CSS and Tailwind utilities.
/* Traditional CSS */
input:focus {
border-color: blue; /* Change border color on focus */
outline: none; /* Remove default outline */
}
/* Tailwind CSS */
<input
class="border border-gray-300 <!-- Default border -->
focus:border-blue-500 <!-- Change border on focus -->
focus:ring-2 <!-- Add ring -->
focus:ring-blue-400" <!-- Ring color -->
/>Layering concept:
Default → gray border
Focus → blue border + ring
Focus vs Hover
Hover Focus Mouse-based Keyboard-based Optional Mandatory Visual hint Accessibility requirement Never remove focus styles just for design reasons.
Best Practices for Focus State
Never disable focus visibility
Make focus distinct from hover
Ensure focus works without mouse
Test using keyboard only
Active State
What is Active State ?
The Active State represents the moment when an element is being pressed or clicked.
It is a temporary state that exists:
Between mouse down and mouse up
Between touch start and touch end
Active answers:
“Your action is being registered.”
Why Active State Matters
Active state provides:
Tactile feedback
Confirmation of interaction
Physical button-like feeling
Without active state:
Clicks feel unresponsive
UI feels laggy or broken
Common Active State Effects
Darker background
Pressed-in appearance
Reduced shadow
Slight scale-down
Active State Comparison (CSS vs Tailwind)
Shows how active states are handled in traditional CSS and Tailwind using utility classes.
<!-- Traditional CSS approach -->
<style>
/* Changes background when button is actively pressed */
button:active {
background-color: darkblue;
}
</style>
<button>
Save
</button>
<!-- Tailwind CSS approach -->
<!-- Uses utility classes for hover and active states -->
<button
class="bg-blue-500
hover:bg-blue-600
active:bg-blue-700
text-white"
>
Save
</button>State flow:
Default → Blue
Hover → Darker blue
Active → Darkest blue
Active State Design Rules
Active state should be short-lived
Should not conflict with disabled state
Should feel natural and immediate
Avoid large animations on active
Active vs Focus
Active is momentary
Focus can persist
Both should coexist correctly
Disabled State
What Is Disabled State ?
The Disabled State represents an element that is:
Not interactive
Temporarily unavailable
Restricted due to conditions
Disabled answers:
“This action is not allowed right now.”
Why Disabled State Is Important
Disabled state:
Prevents invalid actions
Guides user flow
Reduces errors
Improves clarity
Without clear disabled states:
Users click unnecessarily
Confusion increases
Trust decreases
Common Disabled Scenarios
Submit button before form completion
Actions requiring permissions
Loading states
Feature restrictions
Visual Indicators of Disabled State
Typical disabled styling:
Reduced opacity
Gray colors
No hover or active effects
cursor-not-allowed
Disabled elements must look:
Clearly inactive
Unclickable
Distinct from active elements
Disabled Button Styling (CSS vs Tailwind)
Shows how to style a disabled button using traditional CSS and Tailwind utility classes.
/* Traditional CSS */
button:disabled {
background-color: gray;
cursor: not-allowed;
}
/* Tailwind CSS */
<button
disabled
class="bg-blue-500 /* default background */
disabled:bg-gray-300 /* background when disabled */
disabled:cursor-not-allowed /* cursor style */
disabled:opacity-60 /* opacity when disabled */"
>
Submit
</button>State Priority
Disabled state overrides:
Hover
Focus
Active
A disabled element:
Should not react
Should not animate
Should not mislead
Accessibility & Disabled State
Disabled state must be announced to screen readers
Do not rely only on color
Combine visual and semantic disabling
States are not decoration.
States are communication.A professional UI:
Responds instantly
Guides users clearly
Works for mouse, keyboard, and touch
Feels alive and reliable
the problem is almost always missing or broken states.