Tutoriel CSS3 Créer un bouton On / Off élégant
L’utilisation d’un bouton est jusqu’à présent le moyen privilégié pour interagir avec un fichier électronique; tels que la radio, la télévision, le lecteur de musique et même un smartphone doté d'une fonction de commande vocale nécessite toujours au moins un ou deux boutons physiques.
De plus, en cette ère numérique, le bouton a également évolué sous sa forme numérique, ce qui le rend plus interactif, dynamique et facile à créer, par rapport au bouton physique.
Donc, cette fois, nous allons créer un bouton lisse et interactif qui est basé sur cet excellent design chez Dribbble en utilisant uniquement du CSS.
Eh bien, commençons juste.
HTML
Nous allons commencer le bouton en plaçant le balisage suivant sur notre document HTML. C'est très simple, le bouton serait basé sur une balise d'ancrage, nous avons aussi un envergure à côté de lui pour créer le voyant, puis ils sont enveloppés ensemble dans un HTML5 section étiquette.
& # xF011;
Voici à quoi ressemble initialement notre bouton.
Style de base
Dans cette section, nous commencerons à travailler sur le modes.
Nous appliquons d’abord ce fond sombre de Motif subtil sur le document du corps et centrons le section. Ensuite, nous allons également supprimer le pointillé contour sur le :concentrer et :actif lien.
body background: url ('images / micro_carbon.png'); section margin: 150px auto 0; largeur: 75px; hauteur: 95px; position: relative; text-align: center; : actif,: focus contour: 0; Utiliser une police personnalisée
Pour l’icône du bouton, nous utiliserons une police personnalisée de Font Awesome plutôt qu’une image. De cette façon, l'icône sera facilement modifiable et évolutive à travers la feuille de style.
Téléchargez la police, stockez les fichiers de police (eot, woff, ttf et svg) dans le répertoire les polices dossier, puis placez le code suivant sur votre feuille de style pour définir une nouvelle famille de polices.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: format url ("fonts / fontawesome-webfont.eot? #iefix") ('eot'), format url ("fonts / fontawesome-webfont.woff") (format "woff"), url ("fonts / fontawesome- webfont.ttf ") format ('type réel'), url (" polices / fontawesome-webfont.svg # FontAwesome ") format ('svg'); poids de la police: normal; style de police: normal; 
le icône de puissance dont nous avons besoin pour ce bouton est représenté en nombre Unicode F011; si vous regardez attentivement le balisage HTML ci-dessus, nous avons mis ce caractère numérique & # xF011; dans la balise d'ancrage, mais puisque nous n'avons pas défini la coutume famille de polices dans le style du bouton, l'icône n'a pas encore été rendue correctement.
Lectures complémentaires: Unicode et HTML: Caractères de document
Styliser le bouton
Tout d’abord, nous devons définir la coutume famille de polices pour le bouton.
Notre bouton sera un cercle, nous pouvons réaliser l’effet de cercle en utilisant le bouton rayon de la frontière propriété et définissez la valeur sur au moins la moitié de la valeur du bouton. largeur.
Depuis, nous utilisons une police pour l'icône, nous pouvons facilement définir la Couleur et ajouter ombre de texte pour l'icône dans la feuille de style ainsi.
Ensuite, nous allons également créer un effet biseauté pour le bouton. Cet effet est assez délicat. Tout d'abord, nous devons appliquer couleur de fond: rgb (83,87,93); pour la base de couleur du bouton, nous ajoutons alors jusqu'à quatre couches de ombres de boîte.
une font-family: "FontAwesome"; couleur: RGB (37,37,37); ombre de texte: 0px 1px 1px rgba (250,250,250,0,1); taille de police: 32 pt; bloc de visualisation; position: relative; texte-décoration: aucun; couleur de fond: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1ère ombre * / 0px 7px 10px 0px rgb (17,17,17), / * 1ère ombre * / incrément 0px 1px 1px 1px 0px 0px 0gx , 250, 250, .2), / * 3rd Shadow * / encadré 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4th Shadow * / width: 70px; hauteur: 70px; bordure: 0; border-radius: 35px; text-align: center; hauteur de ligne: 79px;
Il y a aussi un cercle plus large à l'extérieur du bouton et nous utiliserons le :avant pseudo-élément pour cela plutôt que d'ajouter des balises supplémentaires.
a: before contenu: ""; largeur: 80px; hauteur: 80px; bloc de visualisation; z-index: -2; position: absolue; couleur de fond: RGB (26,27,29); à gauche: -5px; en haut: -2px; border-radius: 40px; boîte-ombre: 0px 1px 0px 0px rgba (250,250,250,0,1), en médaillon 0px 1px 2px rgba (0, 0, 0, 0,5);
Lectures complémentaires: CSS: avant et: après pseudo-éléments (Hongkiat.com)
Voyant
Sous le bouton, une petite lumière indique l'état de mise sous tension et hors tension. Ci-dessous, nous appliquons du rouge à la couleur de la lumière car l’alimentation est initialement désactivée, nous ajoutons également boîte ombre imiter l'effet de brillance de la lumière.
un + span display: block; largeur: 8px; hauteur: 8px; couleur de fond: rgb (226,0,0); box-shadow: incrément 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); border-radius: 4px; clarifier les deux; position: absolue; en bas: 0; à gauche: 42%;
L'effet
À ce stade, notre bouton commence à bien paraître et nous n’avons plus qu’à y ajouter quelques effets. Par exemple, lorsque vous cliquez sur le bouton, nous voulons que le bouton donne l’impression qu’il est maintenu enfoncé..
Pour atteindre cet effet, le premier boîte ombre dans le bouton sera mis à zéro et la position sera un peu abaissée. Nous devons également ajuster un peu les intensités des trois autres ombres pour correspondre à la position du bouton..
a: actif box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1ère ombre * / 0px 3px 7px 0px rgb (17,17,17), / * 2ème ombre * / incrément 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3rd Shadow * / encadré 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4th Shadow * / background-color: rgb (83,87,93); en haut: 3px;
De plus, une fois que le bouton a été cliqué, il devrait rester enfoncé et l'icône devrait «briller» pour indiquer que l'appareil est allumé..
Pour obtenir un tel effet, nous allons cibler le bouton en utilisant le bouton :cible pseudo-classe, puis changez la couleur de l'icône en blanc et ajoutez un ombre de texte avec la couleur blanche aussi.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), encart 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, 0,5); couleur de fond: rgb (83,87,93); en haut: 3px; couleur: #fff; texte-ombre: 0px 0px 3px rgb (250, 250, 250);
Lectures complémentaires: Utilisation de: cible pseudo-classe
Nous devons également ajuster le boîte ombre dans le cercle à l'extérieur du bouton, comme suit.
a: actif: avant, a: cible: avant top: -5px; couleur de fond: RGB (26,27,29); boîte-ombre: 0px 1px 0px 0px rgba (250,250,250,0,1), en médaillon 0px 1px 2px rgba (0, 0, 0, 0,5);
Le voyant lumineux passe du rouge au vert par défaut pour souligner le fait que l’alimentation est déjà allumée.
a: target + span box-shadow: insert 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); couleur de fond: rgb (135,187,83);
Effet de transition
Enfin, pour que l'effet du bouton fonctionne correctement, nous appliquerons également l'effet de transition suivant..
Cet extrait ci-dessous ajoutera spécifiquement la transition à la Couleur la propriété et la ombre de texte pour 350ms dans l'élément d'ancrage.
une transition: couleur 350 ms, texte-ombre 350 ms; -o-transition: couleur 350ms, texte-ombre 350ms; -moz-transition: couleur 350ms, texte-ombre 350ms; -webkit-transition: couleur 350 ms, texte-ombre 350 ms;
Ce deuxième extrait ci-dessous ajoutera la transition pour le Couleur de fond et boîte ombre propriété dans l'indicateur lumineux.
a: target + span transition: couleur d'arrière-plan 350 ms, ombrage 700 ms; -o-transition: couleur d'arrière-plan 350 ms, boîte-ombre 700 ms; -moz-transition: couleur d'arrière-plan 350 ms, boîte ombre 700 ms; -webkit-transition: couleur d'arrière-plan 350 ms, boîte ombre 700 ms;
Résultat final
Nous sommes venus à travers tous les styles dont nous avons besoin, vous pouvez maintenant voir le résultat final en direct ainsi que télécharger le fichier source à partir des liens ci-dessous..
- Démo
- Source de téléchargement
Bonus: comment l'éteindre
Voici le bonus. Si vous avez essayé le bouton de la démo ci-dessus, vous avez remarqué que vous ne pouvez cliquer sur le bouton qu'une seule fois, c'est pour l'activer, alors comment pouvons-nous le désactiver??.
Malheureusement, nous devons le faire avec jQuery, mais c'est aussi très simple. Vous trouverez ci-dessous tout le code jQuery dont nous avons besoin..
$ (document) .ready (fonction () $ ('bouton #'). clic (fonction () $ (ceci) .toggleClass ('on'););); L'extrait ci-dessus ajoutera la classe ON dans l'ancre, et nous avons utilisé le toggleClass fonction de jQuery pour l'ajouter. Alors, quand le #bouton est cliqué sur, le jQuery vérifiera si la classe ON a été ajoutée ou non: quand ce n'est pas le cas, le jQuery ajoutera la classe, et si elle a été ajoutée, le jQuery supprimera la classe.
Remarque: N'oubliez pas d'inclure la bibliothèque jQuery.
Maintenant, nous devons changer un peu le style. Il suffit de remplacer tous les :cible pseudo-élément avec le .sur sélecteur de classe, comme suit:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), encart 0px 1px 1px 0px rgba (250, 250, 250, .2) , inset 0px -10px 35px 5px rgba (0, 0, 0, 0,5); couleur de fond: rgb (83,87,93); en haut: 3px; couleur: #fff; texte-ombre: 0px 0px 3px rgb (250, 250, 250); a: actif: avant, a.on: avant top: -5px; couleur de fond: RGB (26,27,29); boîte-ombre: 0px 1px 0px 0px rgba (250,250,250,0,1), en médaillon 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: insert 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); couleur de fond: rgb (135,187,83);
Enfin, essayons dans le navigateur.
- Démo
- Source de téléchargement
