Créer un Toggle Switch en CSS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Créer un Toggle Switch en CSS

Carl Brison
Promo -40% Jusqu'au 19 février, 20:00
3,00€4,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto CSS en vidéo, nous allons apprendre à réaliser un Toggle Switch (interrupteur à bascule en français).

Tuto Toggle Switch CSS

Le toggle switch ou plus simplement switch CSS est un élément de formulaire très utilisé en front-end.
Il permet de basculer d'un mode actif à inactif et inversement. Dans certains cas cette présentation en Toggle Switch est préférable à une simple case à cocher.

Au cours de ce tutoriel, nous apprendrons à créer ensemble un Switch CSS grâce à certaines propriétés, pseudo classes et pseudo éléments. Pour passer de l'état on à off, notre Toggle Switch sera animé.

Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place des bases
Leçon 2
Modification de l'apparence
Leçon 3
Modification avant
Leçon 4
Animation
Leçon 5
Variante
Leçon 6
Conclusion

Plan détaillé du cours

Leçon 1Mise en place des bases
02m25
Leçon 2Modification de l'apparence
03m33
Leçon 3Modification avant
04m43
Leçon 4Animation
04m07
Leçon 5Variante
02m37
Leçon 6Conclusion
45

Aperçus

Avis des apprenants

Détail des avis
84
Apprenants
9
Commentaires
5/5
Note moyenne
5/5
9
4/5
0
3/5
0
2/5
0
1/5
0
Arnaud Drapier
Arnaud Drapier
Publié le 30/01/2025
Merci Carl pour votre excellent cours
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 02/01/2025
Ces CheckBox sont quand même beaucoup plus belles ;-)
Carl Brison
Carl Brison
Merci beaucoup, c'est très gentil ;-)
Alain Tardif
Alain Tardif
Publié le 12/09/2023
Merci Carl pour ce cours vraiment sympa à suivre, bien expliqué et facile à intégrer dans un projet. Validé 100 % #toggle-switch-css
Carl Brison
Carl Brison
Merci beaucoup Alain ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de ce tuto

Payer plus tard

Prix d'achat : 3,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1448 tutos gratuits

Notre politique de protection des données