Suivez la création d'un bouton de téléchargement simple et amusant à l'aide de CSS3 sophistiqué. Notre bouton utilisera de nombreux goodies amusants, y compris bordure-rayon, ombre-boîte, dégradés linéaires, index z et transitions pour obtenir un effet de tiroir double coulissant unique en vol stationnaire.
Au fur et à mesure, je discuterai des raisons pour lesquelles certaines techniques que vous pourriez penser d’utiliser devraient être évitées. Les transitions sont difficiles à manipuler et ont tendance à refuser de travailler avec certaines propriétés. Continuez de lire pour en savoir davantage.
Le concept
Partant de cette idée, je souhaitais créer un bouton de téléchargement avec un effet de tiroir coulissant où des informations initialement masquées apparaissent lorsque l'utilisateur commence un survol. Pour faire ma propre réaction, j'ai décidé de doubler l'effet et de créer un tiroir à la fois en haut et en bas du bouton (cliquez ici pour avoir un aperçu du résultat final).
Voici comment cela fonctionnera: en combinant HTML et CSS, nous allons créer trois éléments distincts. Ceux-ci incluent le bouton principal et deux panneaux d’affichage plus petits. Les panneaux les plus petits se masqueront d’abord sous le bouton le plus large, puis, lorsque l’utilisateur est en survol, l’un glisse vers le haut et l’autre vers le bas.
Comme vous pouvez le constater, ce projet sera relativement facile et conviendra parfaitement aux débutants qui souhaitent améliorer leurs compétences en CSS. Il est particulièrement intéressant d'apprendre comment nous allons utiliser le positionnement absolu et l'empilement via z-index.
Ce qui ne fonctionnera pas
Lors de la planification de ce projet, j'ai trouvé plusieurs façons de faire fonctionner mon concept. Étant donné que je suis sur un pseudo élément kick dernièrement, j'ai choisi de structurer le projet initialement en utilisant: before et: after.
Avec ces pseudo-éléments, nous pouvons coder uniquement le bouton de téléchargement dans notre code HTML, puis les ajouter en utilisant du CSS pur. Cela semble être une solution optimale et en effet cela a bien fonctionné? jusqu'à ce que j'ai essayé d'animer la transition. Peu importe ce que j'ai essayé, je ne pouvais tout simplement pas réussir la transition.
Après quelques recherches, j'ai découvert que seul Firefox supportait les transitions CSS sur les pseudo-éléments. C’est une vraie déception qui limite vraiment le plaisir que nous pouvons avoir avec: avant et après. Mais en revanche, j’ai appris une leçon précieuse qui me fera gagner beaucoup de temps et d’ennuis.
Dans des tutoriels comme celui-ci, vous ne parvenez pas souvent à savoir où l'auteur a échoué, mais je pense qu'il est important de communiquer ces échecs pour que vous puissiez en tirer les leçons que j'ai. Maintenant, la prochaine fois que vous voudrez animer un pseudo-élément, vous vous souviendrez que cela ne fonctionnera pas dans la plupart des navigateurs!
Les échecs mis à part, passons à une méthode qui volonté travail.
Le bouton
Pour commencer, nous allons créer et styliser notre bouton. Une fois que cela sera en place, il sera plus facile de former les autres éléments. Tout ce dont nous avons besoin dans le département HTML, c’est d’un div unique contenant un lien. Nous pourrions simplement utiliser le lien pour le bouton, mais nous aurons besoin de regrouper plusieurs objets pour qu'un div soit nécessaire.
Bouton forme et taille
Le code HTML ci-dessus devrait simplement vous fournir un lien en texte brut. Nous allons transformer cela en un bouton avec une forme et une taille de fond définies. Pour ce faire, nous commençons avec certaines dimensions, ajoutons de la couleur et définissons la valeur d'affichage sur bloquer.
Voici un aperçu de votre bouton après cette étape. Cela ne ressemble pas beaucoup, mais ce sera un bouton élégant avant que vous ne le sachiez.
Styles de types
La première chose laide à propos du bouton ci-dessus que nous devrons corriger est le type, c'est actuellement un gâchis. Heureusement, c'est facile à résoudre. Tout ce que nous devons faire est de définir la couleur sur blanc, de déclarer une police et de la centrer.
Il y a deux choses intéressantes à noter ici. Tout d'abord, notez que j'utilise la police? sténographie plutôt que de parcourir individuellement la propriété de la police C'est un excellent moyen de gagner de la place et de garder vos styles de caractères agréables et concis. L'ordre ici est comme suit:
Voici une autre astuce astucieuse: je règle la hauteur de ligne sur 50 px pour la centrer verticalement dans le bouton. Notez également que j'ai supprimé le soulignement du texte et transformé le type en majuscule. Pourquoi n'ai-je pas simplement tapé le texte en majuscules en HTML? Parce que c’est vraiment un choix de style et que cela pourrait changer avec une refonte future.
Maintenant, notre bouton est beaucoup mieux!
CSS3 Magic
À ce stade, notre bouton est toujours un peu plus clair. Si vous êtes cool avec le look minimal, vous pouvez aller de l'avant. Sinon, rendons-le un peu plus intéressant. La première chose à faire est d'arrondir les angles. Assurez-vous d’ajouter les trois préfixes du navigateur:
Ensuite, nous allons jeter dans une boîte-ombre. Encore une fois, nous aurons besoin de trois versions pour couvrir les différents navigateurs. L'ordre des valeurs abrégées est ici le décalage horizontal, le décalage vertical, le flou et la couleur.
Enfin, nous allons lancer un dégradé. Malheureusement, cela nécessite tout un fouillis de code. La façon dont les gradients fonctionnent récemment change donc nous avons non seulement besoin de plusieurs préfixes, mais également de plusieurs syntaxes pour nous assurer de tout gérer.Je vais être honnête, je code rarement ces choses à la main. Au lieu de cela, j'utilise le générateur de dégradé ultime et colle le code généré. Voici le résultat:
Maintenant, notre bouton est complètement stylé et beau. Voici le résultat:
Ajout des tiroirs
Maintenant que notre bouton principal est terminé, il est temps d'ajouter les petits tiroirs qui glisseront du haut vers le bas (peut-être "ailes" est le terme approprié). Pour ce faire, nous allons commencer par ajouter un peu à notre code HTML:
Comme vous pouvez le voir, j'ai essentiellement divisé en deux paragraphes, chacun avec une classe unique qui les rend faciles à cibler (vous pouvez utiliser des pseudo-sélecteurs à la place si vous voulez vraiment avoir de la fantaisie).
Style de paragraphe par défaut
Passez maintenant à votre CSS et nous styliserons les paragraphes. Pour commencer, nous voulons nous concentrer sur les styles que les deux paragraphes vont partager. Styliser les deux à la fois, dans la mesure du possible, contribue à maintenir notre code propre et moins redondant. Voici un gros morceau de code sur lequel réfléchir:
Maintenant, c'est beaucoup à vous lancer en même temps, donc je vais le parcourir étape par étape. La première chose à faire est de donner aux styles de forme, de couleur et de style des paragraphes exactement comme nous l’avons fait pour le bouton. La principale différence est que ceux-ci sont plus petits et utilisent des marges pour les mettre en place.
Viennent ensuite les styles de positionnement. Celles-ci sont très importantes, alors assurez-vous de bien les comprendre. Pour que les ailes apparaissent derrière le bouton, nous devons appliquer z-index, qui affecte l’ordre d’empilement des éléments. Pensez à cela comme à un? Send to back? sorte de commande. Pour que cela fonctionne, nous devons appliquer un positionnement absolu.
Enfin, nous avons ajouté les mêmes styles de bordures de rayons et de dégradés que ceux précédemment utilisés. J'ai gardé ces styles séparés des styles précédents pour que les choses restent simples et claires, mais pour rendre les choses plus sèches, vous voudrez probablement réécrire vos styles CSS3 partagés en quelque chose comme ceci:
En gros, chaque fois que vous répétez ou que vous collez des styles plusieurs fois, vous rendez votre code inutilement complexe et vous devez tenter de le simplifier.
À la fin de cette étape, vous ne verrez étrangement aucun changement dans votre aperçu par rapport à la dernière fois. C'est parce que nous avons caché ces éléments derrière le bouton. Ils sont là, vous ne les voyez pas encore!
Survol et styles actifs
Ce que nous voulons ensuite faire, c'est prendre les ailes que nous venons de créer et les déplacer vers l'extérieur lorsque l'utilisateur survole le bouton. Pour ce faire, nous devons simplement ajuster les marges de chaque paragraphe. Ici, nous ciblons chacune des classes que nous avons créées, puis déplaçons les classes .top et .bottom. La classe .top nécessitait également un léger ajustement de la hauteur de ligne pour avoir une apparence correcte.
Pendant que nous sommes ici, nous pourrions aussi bien lancer quelques styles actifs. Ceux-ci prendront effet lors d'un événement de souris.
Comme vous pouvez le constater, ce que j’ai fait ici, c’est d’ajuster le dégradé de manière à ce que la couleur supérieure s’allonge un peu plus loin, puis j’ai ramené les ailes un peu pour qu’il y ait un effet de contraction lorsque vous cliquez.
Maintenant, notre bouton est génial. Nos trois états travaillent. Lorsque vous ne volez pas, cela ressemble à un vieux bouton ordinaire. Lorsque vous planez, les ailes ou les tiroirs sortent. Lorsque vous cliquez, les ailes entrent un peu et le dégradé change très légèrement.
Dernière étape: ajouter la transition
À ce stade, tout semble bien fonctionner. Le seul problème est que l'effet de survol se produit instantanément et nous aimerions bien sûr qu'il soit un peu plus progressif. Pour ce faire, retournez à votre bloc de paragraphe et ajoutez une transition de base de 0,5 seconde en utilisant tous les préfixes requis.
Avec cet ajout, le bouton effectuera une très bonne transition entre les trois états.
Voyez-le en action
Nous avons tous fini! Vous devriez maintenant avoir un superbe bouton de téléchargement CSS animé qui ne manquera pas d’impressionner. Découvrez la démo en direct ci-dessous ou consultez le code sur Tinkerbin.
Démo: Cliquez ici pour lancer
Vous voulez une version encore meilleure du bouton avec six versions différentes au choix? Découvrez le téléchargement gratuit génial sur notre nouveau site soeur Design Curate.
Conclusion
Merci de lire et de suivre. Si vous y êtes parvenu, félicitez-vous pour un travail bien fait.
J'espère que vous avez appris quelque chose sur z-index ou sur les astuces géniales de CSS3. Sinon, vous avez au moins un bouton génial! Laissez un commentaire ci-dessous et laissez-nous savoir si vous avez apprécié le tutoriel.