CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Comment créer et animer un bouton en CSS

Comment créer et animer un bouton en CSS

Animez un bouton
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Création et animation d'un bouton en CSS

Objectifs

Les objectifs de cette vidéo sont de vous apprendre à créer un bouton en CSS, à utiliser les pseudo-éléments ::before et ::after pour générer du contenu, et à animer ce bouton au survol.

Résumé

Découvrez comment créer et animer un bouton en CSS à partir de zéro.

Description

Dans cette leçon, nous verrons les étapes pour créer un bouton entièrement en CSS, y compris son design et son animation. Nous partirons d'une structure de base HTML contenant un élément div et nous y ajouterons notre bouton avec la classe btn-more. Le bouton sera conçu pour être rond et affichera un signe plus en utilisant les pseudo-éléments ::before et ::after. En définissant des dimensions, marges, et en centrant le bouton, nous créerons une interface utilisateur propre et engageante. Ensuite, nous aborderons l'animation, où le bouton effectuera une rotation de 180 degrés au survol, se transformant ainsi en une croix. Ces techniques vous permettront d'améliorer l'interactivité et la visibilité de vos boutons dans vos projets web.

Voir plus

Questions - réponses

Pourquoi utiliser les pseudo-éléments <code>::before</code> et <code>::after</code> pour créer le signe plus ?
Les pseudo-éléments ::before et ::after permettent de générer des éléments additionnels purement via CSS sans ajouter de balises HTML supplémentaires, ce qui simplifie la structure du DOM.
Quel est l'avantage d'utiliser <code>position: absolute</code> pour centrer les barres du signe plus ?
Utiliser position: absolute permet de positionner les barres précisément par rapport à leur parent, facilitant ainsi leur centrage à l'intérieur du bouton.
Comment rendre invisible le texte à l'intérieur du bouton sans l'enlever du HTML ?
Pour rendre le texte invisible, on utilise la technique text-indent avec une valeur négative ou overflow: hidden dans un élément parent avec un padding spécifique.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 4 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !