Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
Utilitaires✨ Premium

Bookmark Toggle

Signet à encoche qui se remplit d'indigo avec un rebond élastique quand on le touche, et libellé qui passe de « Sauvegarder » à « Sauvegardé ! ».

CSSToggleAnimation

Mis à jour le

Bookmark Toggle — aperçu ▶ Compte gratuit : aperçu en direct + 1 effet offert

Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →

Voir dans le catalogue

3 exemples d'usage

Marquer une question à revoir pendant un examen blanc — Bookmark Toggle exemple 1

① Marquer une question à revoir pendant un examen blanc

QuandPendant l'examen blanc de premiers secours de Pradivelle, le candidat hésite sur la question 7 : il choisit une réponse, touche le signet « Marquer » en haut de la question, puis continue. La case 7 de la grille prend une pastille violette et le compteur passe à « 2 questions à revoir ».
PourquoiLe signet sert ici de pense-bête dans un questionnaire : il ne range rien pour plus tard, il signale une question à reprendre avant de rendre la copie. La grille et le compteur suivent l'événement fx0743:change, sans autre suivi de l'état.
Réglagesaria-label="Marquer la question 7 pour y revenir", libellés « Marquer » / « À revoir » (data-bmk-on) ; --bmk-size: 16px, --bmk-gap: 7px, --bmk-on: #7c3aed, --bmk-off: #7b8494, --bmk-label: #475569, --bmk-label-on: #6d28d9, --bmk-label-size: .78rem. La pastille de la grille et le compteur sont des éléments de la scène mis à jour sur fx0743:change ; dans la capture, la scène clique le vrai signet toutes les 1,1 s.
« Garder la recette » sur une fiche de cuisine — Bookmark Toggle exemple 2

② « Garder la recette » sur une fiche de cuisine

QuandSur la fiche d'un velouté de potimarron, sous le titre, le temps et la difficulté, le lecteur clique « Garder la recette » pour la retrouver dans son carnet ; le libellé devient « Recette gardée ! ».
PourquoiIci le signet est l'action principale de la fiche : plus grand, encadré comme un bouton, il garde son rebond pour marquer le moment où la recette rejoint le carnet.
Réglages--bmk-size: 24px, --bmk-gap: 12px, --bmk-on: #b45309, --bmk-label-on: #b45309, --bmk-label-size: .95rem ; bordure, fond blanc et marges ajoutés au bouton par le CSS de la scène. Clic toutes les 1,2 s dans la capture.
Un ruban marque-page en haut d'une liseuse — Bookmark Toggle exemple 3

③ Un ruban marque-page en haut d'une liseuse

QuandDans une liseuse, le lecteur s'arrête page 112 ; il touche le ruban accroché en haut à droite de la page, qui devient rouge, et « Page marquée » s'affiche à côté.
PourquoiLa forme à encoche est celle d'un vrai ruban de livre : posé contre le bord haut de la page, le signet indique l'état de la page sans aucun autre décor.
RéglagesRacine en position: absolute en haut à droite de la page ; --bmk-size: 26px, --bmk-on: #b91c1c, --bmk-off: #a08c74, --bmk-label-size: .75rem ; libellé placé à gauche du ruban par le CSS de la scène (flex-direction: row-reverse). Clic toutes les 1,25 s dans la capture.

Comment ça marche

Le signet est dessiné en SVG : un rectangle aux coins du haut arrondis, fendu en V en bas. Le signet et son libellé sont dans le même <button> : toute la zone se clique.

Au clic, à la touche Entrée ou Espace, aria-pressed passe à true. Le signet se remplit d'indigo (#6366f1), s'enfonce puis rebondit (0,4 s, cubic-bezier(.68,-.55,.265,1.55)) et reste agrandi à 110 % ; le libellé prend le texte de data-bmk-on et la couleur #818cf8. Un nouveau clic remet le gris et le libellé de départ. Le rebond ne joue qu'après un clic, jamais au chargement d'un signet déjà sauvegardé.

La couleur du libellé vient du CSS (--bmk-label, --bmk-label-on), donc se change sans toucher au JavaScript. L'état de départ se lit dans aria-pressed, et chaque bascule envoie l'événement fx0743:change (detail.saved) depuis la racine, pour enregistrer le favori côté serveur.

Accessibilité

  • Nom et état : le bouton garde un nom fixe (aria-label="Sauvegarder") et dit son état par aria-pressed : « Sauvegarder, bouton bascule, activé ». Le libellé visible, qui change, est masqué aux lecteurs d'écran pour ne pas être lu deux fois.
  • Clavier : vrai <button>, Entrée et Espace, anneau lavande autour du signet et du libellé au focus clavier.
  • Contraste : signet éteint #70708c à 3,6:1 sur le fond ; libellé sauvegardé #818cf8 à 5,7:1.
  • Mouvement réduit : le signet change de couleur sur place, sans rebond ni transition.

Compatibilité navigateur

SVG en ligne, CSS et 1,7 Ko de JavaScript sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : code collé deux fois (chaque signet bascule seul), clic, Espace au clavier, toucher à 390 px, mouvement réduit, 0 erreur, aucun nom ajouté sur window.

Chrome 86+✓ Complet (mesuré)
Firefox 85+✓ Complet (mesuré)
Safari 15.4+✓ Complet (mesuré dans WebKit)
Edge 86+✓ Complet (moteur Chromium)
Mobile iOS 15.4+✓ Moteur WebKit, non vérifié sur appareil
Android Chrome 86+✓ Complet (toucher mesuré)

Sans JavaScript, le signet gris et son libellé s'affichent mais ne basculent pas. L'anneau de focus demande :focus-visible (Chrome 86, Firefox 85, Safari 15.4) ; dans les navigateurs plus anciens, tout fonctionne sans anneau.

Le code

Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :

index.html — structure 
<div class="fx-0743-root">
  <div class="bmk-demo">
    <button type="button" class="bmk-btn" aria-pressed="false" aria-label="Sauvegarder" data-bmk-on="Sauvegardé !">
      <svg class="bmk-icon" viewBox="0 0 30 40" aria-hidden="true"><path d="M4 0h22a4 4 0 0 1 4 4v36L15 28 0 40V4a4 4 0 0 1 4-4z"></path></svg>
      <span class="bmk-label" aria-hidden="true">Sauvegarder</span>
    </button>
  </div>
</div>

Paiement unique, sans abonnement — le code est à toi pour toujours

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
Libellés (HTML — texte de .bmk-label et data-bmk-on) « Sauvegarder » · « Sauvegardé ! » Texte au repos et une fois sauvegardé ; gardez l'aria-label du bouton accordé au premier.
Déjà sauvegardé (HTML — aria-pressed="true") false Affiche un favori existant, sans rebond au chargement.
Taille du signet (CSS — --bmk-size) 30 px (hauteur 40 px) La hauteur suit toujours le rapport 4/3.
Couleurs du signet (CSS — --bmk-off, --bmk-on) #70708c · #6366f1 Gardez au moins 3:1 avec votre fond pour le signet éteint.
Libellé (CSS — --bmk-label, --bmk-label-on, --bmk-label-size, --bmk-gap) blanc à 60 % · #818cf8 · .9rem · 20 px Couleurs et taille du texte, écart avec le signet.
Cadre (CSS — --bmk-height, --bmk-page, --bmk-panel, --bmk-pad) 300 px · #0a0a0f · #1a1a2e · 20 px 0 et transparent pour le poser dans une ligne ou une carte.
Serveur (JS — événement fx0743:change) — detail.saved vaut true ou false à chaque clic : enregistrez ou retirez le favori.

FAQ

Parce que le bouton dit déjà tout : son nom fixe (« Sauvegarder ») et son état (« activé »). Si le libellé changeant était lu aussi, on entendrait deux informations contradictoires, « Sauvegarder » et « Sauvegardé ! ».
Oui : supprimez le <span class="bmk-label"> ; le bouton garde son aria-label, donc reste nommé. Prévoyez alors une zone de clic d'au moins 24 px, par exemple avec --bmk-size: 24px.
Générez chaque bouton avec aria-pressed="true" pour les éléments qu'il a déjà gardés : le script affiche alors le signet plein et le libellé data-bmk-on, sans jouer le rebond.