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

TUTO Créer un Toggle Switch en CSS

Carl Brison
5,00€

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
02m25s
Leçon 2Modification de l'apparence
03m33s
Leçon 3Modification avant
04m43s
Leçon 4Animation
04m07s
Leçon 5Variante
02m37s
Leçon 6Conclusion
45s

Aperçus

Avis des apprenants

Détail des avis
15
Apprenants
7
Commentaires
5/5
Note moyenne
5/5
7
4/5
0
3/5
0
2/5
0
1/5
0
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 ;-)
Eric Reynaud
Eric Reynaud
Publié le 22/03/2023
Super, Carl ! Je viens de découvrir ce petit tuto très sympa ! Je faisais cette animation sur Figma, et maintenant je sais comment intégrer tout cela en CSS. Merci beaucoup, et à bientôt, Eric.
Carl Brison
Carl Brison
Merci beaucoup ;-)
Jean-Philippe Eschrich
Jean-Philippe Eschrich
Publié le 25/06/2021
Superbe idée ce Toogle ! Je suis ravi
Carl Brison
Carl Brison
Génial ! Merci beaucoup ;-)

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

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données