Interactions web

Hover

Changer un style au survol

HTML

<button class="btn">OK</button>

CSS

.btn:hover {
    background: #111;
    color: #fff;
    transform: scale(1.05);
}

Variantes possibles : couleur, transform.

Focus

Focus visible clavier

CSS

.link:focus-visible { outline: 2px solid #00b3ff; }

Focus within

HTML

<div class="group">
    <input>
</div>

CSS

.group:focus-within { border-color: #ff0066; }

Variantes possibles : focus-visible, focus-within.

Active

État actif d’un bouton

HTML

<button class="press">OK</button>

CSS

.press:active { 
    transform: scale(0.95);
    opacity: 0.7;
}

Variantes possibles : scale, opacity.

Details / Summary

Ouvrir/fermer une zone

HTML

<details class="faq">
    <summary>Question</summary>
    <p>Réponse</p>
</details>

CSS

.faq[open] { border-color: #ff0066; }

Variantes possibles : open, details-content.

Dialog

Ouvrir un dialog natif

HTML

<dialog id="box">Texte</dialog>
<button onclick="box.showModal()">Ouvrir</button>

Fermer un dialog

HTML

<button onclick="box.close()">Fermer</button>

Variantes possibles : show(), showModal(), close().

Popover

Popover natif

HTML

<button popovertarget="info">Info</button>
<div id="info" popover>Texte</div>

Popover automatique

HTML

<button popovertarget="menu" popovertargetaction="toggle">Menu</button>
<div id="menu" popover>Contenu</div>

Variantes possibles : toggle, show, hide.

Anchor interactions

Positionner un élément lié à un trigger

HTML

<button anchor-name="--btn">Ouvrir</button>
<div class="panel">Menu</div>

CSS

.panel {
    position-anchor: --btn;
    top: anchor(bottom);
}

Variantes possibles : top, bottom, left, right, center.

Scroll interactions

Scroll fluide

CSS

html { scroll-behavior: smooth; }

Scroll snap

CSS

.slider { scroll-snap-type: x mandatory; }
.slide { scroll-snap-align: start; }

Variantes possibles : start, center, end.

Transitions

Transition simple

CSS

.box { 
    transition: transform 0.2s ease;
}

Variantes possibles : all, transform, opacity...

Animations

Animation hover

CSS

@keyframes pulse {
    to { transform: scale(1.05); }
}

.btn:hover { animation: pulse 0.3s; }

Animation d’apparition

CSS

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in { animation: fade 0.4s; }

Variantes possibles : scale, opacity...

Micro‑interactions

Ripple minimal

HTML

<button class="ripple">OK</button>

CSS

.ripple {
    position: relative;
    overflow: hidden;
}
.ripple:active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}

Highlight au clic

CSS

.click:active { background: #eee; }

Variantes possibles : ripple, highlight.

JS minimal

Toggle simple

HTML

<button id="t">Toggle</button>
<div id="box">Texte</div>

JS

t.onclick = () => box.classList.toggle("open");

CSS

.open { display: block; }

Variantes possibles : toggle class.