Variantes au survol et à l’activation
Utilisez les préfixes hover:* et active:* pour modifier les couleurs, les ombres et les transformations lorsqu’une personne interagit avec un élément.
Variantes au survol et à l’activation est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Pseudo-State Variants in Tailwind
CSS pseudo-classes like :hover, :active, and :focus let you apply styles only when specific user interactions occur. In Tailwind, you access these by prefixing any utility with the variant name and a colon. For example, hover:bg-blue-600 changes the background color only while the cursor hovers over the element. This eliminates the need for custom CSS rules for the most common interactive states.
<!-- Basic hover state -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
Hover me
</button>hover: Prefix in Practice
The hover: prefix applies styles when the user's cursor is over an element. You can hover-prefix any Tailwind utility: color, shadow, scale, opacity, text decoration, and more. The combination hover:shadow-lg hover:-translate-y-1 creates the popular card lift effect where a card appears to rise off the page as the cursor approaches it.
<!-- Card with multiple hover effects -->
<div class="max-w-xs bg-white rounded-xl p-5 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer border border-gray-100">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
<span class="text-indigo-600 font-bold">A</span>
</div>
<h3 class="font-bold text-gray-900">Analytics Card</h3>
<p class="text-sm text-gray-500 mt-1">Hover to see lift effect</p>
</div>Hover for Text Styling
Hover variants work on text properties too. hover:text-blue-600 changes text color on hover, hover:underline adds an underline, and hover:no-underline removes one. Navigation links commonly use text-gray-600 hover:text-gray-900 for a subtle dark-on-hover effect that signals interactivity without an explicit underline style.
<!-- Navigation with hover text effects -->
<nav class="flex gap-6 p-4">
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Home</a>
<a href="#" class="text-gray-600 hover:text-indigo-600 hover:underline transition-colors">Products</a>
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">About</a>
<a href="#" class="text-indigo-600 font-medium">Contact</a>
</nav>active: for Pressed States
The active: variant applies styles while the user is actively pressing an element (the moment between mousedown and mouseup). This creates a physical press feedback. Common patterns include active:scale-95 to make a button appear to compress when clicked, or active:bg-blue-700 to make the background slightly darker, giving tactile feedback similar to pressing a physical button.
<!-- Button with press animation using active: -->
<div class="flex gap-4">
<!-- Scale-down on press -->
<button class="bg-blue-500 hover:bg-blue-600 active:scale-95 active:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-all">
Click Me
</button>
<!-- Darken on press -->
<button class="bg-emerald-500 hover:bg-emerald-600 active:bg-emerald-800 text-white px-6 py-3 rounded-lg font-medium transition-colors">
Buy Now
</button>
</div>Combining hover: and active: Together
The full button interaction sequence is: default → hover → active → default. Each state should provide distinct but harmonious visual feedback. A typical pattern is bg-blue-500 hover:bg-blue-600 active:bg-blue-700 — progressively darker shades that simulate physical depth. This three-state progression is the foundation of every accessible button in a well-designed UI.
<!-- Full button state progression -->
<div class="flex gap-4 flex-wrap">
<!-- Primary button: full state progression -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors active:scale-95">
Primary
</button>
<!-- Danger button: full state progression -->
<button class="bg-red-500 hover:bg-red-600 active:bg-red-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors active:scale-95">
Delete
</button>
<!-- Ghost button: hover adds background -->
<button class="text-gray-700 hover:bg-gray-100 active:bg-gray-200 px-5 py-2.5 rounded-lg font-medium transition-colors">
Ghost
</button>
</div>hover: on Non-Button Elements
The hover: variant works on any HTML element, not just buttons. Table rows with hover:bg-gray-50, list items with hover:bg-blue-50, and grid cards with hover:border-blue-500 all benefit from hover states. Adding cursor-pointer alongside the hover style signals to users that the element is clickable even when it is not a native button or link.
<!-- Hoverable table rows -->
<table class="w-full">
<thead>
<tr class="bg-gray-50 text-left">
<th class="p-3 font-semibold">Name</th>
<th class="p-3 font-semibold">Status</th>
<th class="p-3 font-semibold">Score</th>
</tr>
</thead>
<tbody class="divide-y">
<tr class="hover:bg-blue-50 cursor-pointer transition-colors">
<td class="p-3">Alice</td>
<td class="p-3 text-green-600">Active</td>
<td class="p-3">98</td>
</tr>
<tr class="hover:bg-blue-50 cursor-pointer transition-colors">
<td class="p-3">Bob</td>
<td class="p-3 text-yellow-600">Pending</td>
<td class="p-3">74</td>
</tr>
</tbody>
</table>hover: With Transform Utilities
Transform utilities paired with hover: create motion effects without JavaScript. hover:scale-105 zooms in slightly, hover:-translate-y-2 lifts up, and hover:rotate-3 tilts. These micro-interactions make interfaces feel alive and responsive. Always pair transforms with transition-transform duration-200 for smooth animation instead of jarring instant changes.
<!-- Interactive feature icons with transform hover -->
<div class="grid grid-cols-3 gap-6 p-8">
<div class="text-center cursor-pointer group">
<div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:scale-110 hover:bg-blue-200 transition-all duration-200">
<span class="text-2xl">🚀</span>
</div>
<span class="text-sm font-medium">Launch</span>
</div>
<div class="text-center cursor-pointer">
<div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:-translate-y-1 hover:shadow-md transition-all duration-200">
<span class="text-2xl">🌱</span>
</div>
<span class="text-sm font-medium">Grow</span>
</div>
<div class="text-center cursor-pointer">
<div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-2 hover:rotate-6 transition-transform duration-200">
<span class="text-2xl">⚡</span>
</div>
<span class="text-sm font-medium">Boost</span>
</div>
</div>hover: for Link Underline Effects
A polished hover underline effect requires the underline to expand from center or slide in from left. Using relative positioning and a pseudo-element approach with Tailwind's after: variant: set a zero-width bottom border by default and expand it to full width on hover. This creates an animated underline that feels more intentional than the browser's default text-decoration: underline.
<!-- Animated underline link effect -->
<a
href="#"
class="relative text-gray-700 font-medium after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-blue-500 hover:after:w-full after:transition-all after:duration-300"
>
Hover for animated underline
</a>active: for Form Submission Feedback
Form submission buttons especially benefit from active: states. When a user clicks Submit, the active state gives immediate visual confirmation that the click registered, even if the server response takes a moment. Combining active:bg-green-700 with active:scale-95 creates a satisfying press sensation that communicates the action was received.
<!-- Submit form button with clear active state -->
<form class="max-w-sm space-y-4 p-6">
<div>
<label class="block text-sm font-medium mb-1">Email</label>
<input type="email" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="you@example.com" />
</div>
<button
type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-[0.99] text-white py-3 rounded-lg font-semibold transition-all"
>
Subscribe to Newsletter
</button>
</form>hover: and Responsive Variants
Hover and active variants compose with responsive breakpoints. The syntax stacks from left to right: sm:hover:bg-blue-600 means 'on small screens and above, turn blue on hover.' On touch devices, hover states fire once on tap and persist until another element is tapped — something to be aware of when designing hover effects. Use responsive prefixes to disable hover visual changes on mobile if they cause usability issues.
<!-- Hover effects only on desktop (md+) -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-white border rounded-xl p-4 md:hover:shadow-xl md:hover:-translate-y-1 transition-all duration-300">
<h3 class="font-bold">Feature A</h3>
<p class="text-sm text-gray-500">Lift on hover (desktop only)</p>
</div>
<div class="bg-white border rounded-xl p-4 md:hover:shadow-xl md:hover:-translate-y-1 transition-all duration-300">
<h3 class="font-bold">Feature B</h3>
<p class="text-sm text-gray-500">Lift on hover (desktop only)</p>
</div>
</div>Building a Complete Button Component
Here is a complete, production-ready button with all interactive states: default, hover, active, focus-visible, and disabled. This pattern handles every scenario a user might encounter, providing clear visual feedback at each stage. Copy this pattern into your projects as the foundation for a consistent button component.
<!-- Complete button with all states -->
<div class="flex gap-4 flex-wrap">
<!-- Primary button: all states -->
<button
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white px-6 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Active Button
</button>
<!-- Disabled state -->
<button
disabled
class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white px-6 py-2.5 rounded-lg font-medium transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
>
Disabled Button
</button>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: hover: applies styles when the cursor is over an element, active: applies during the press between mousedown and mouseup for physical feedback, and combining hover:bg-* and active:bg-* with progressively darker shades creates the standard button interaction sequence. Next up we explore focus and focus-visible variants for keyboard accessibility.
Questions Fréquemment Posées
La leçon « Variantes au survol et à l’activation » est-elle gratuite ?
Oui — le texte complet de « Variantes au survol et à l’activation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Variantes au survol et à l’activation » ?
Utilisez les préfixes hover:* et active:* pour modifier les couleurs, les ombres et les transformations lorsqu’une personne interagit avec un élément. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Variantes au survol et à l’activation » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Variantes au survol et à l’activation
- Variantes de focus et de focus visible
- Variantes désactivées et d’espace réservé
- Variantes de groupe et d’élément associé