Aujourd'hui, nous allons prendre du recul par rapport aux discussions avancées sur les pré-processeurs CSS et revenir à de bonnes bases. Nous allons créer quatre boutons CSS super simples, chacun avec un effet de survol animé unique.
Suivez-moi et créez vos propres styles de boutons amusants. Aussi, n'hésitez pas à récupérer mon code et à l'utiliser dans vos projets. Si vous êtes un débutant en CSS à la recherche d'un bon moyen de rendre vos boutons plus intéressants, cet article est pour vous!
Ce que nous construisons
J'ai jeté tous les boutons dans une démo afin que vous puissiez avoir un aperçu de tout ce que nous allons voir aujourd'hui. Cliquez sur le lien ci-dessous pour les vérifier!
Démo: Cliquez ici pour lancer.
Paramètres globaux
Avant de commencer avec les boutons individuels, voici quelques paramètres globaux que j'ai appliqués dans tous les exemples.
HTML
À des fins d’expérimentation, j’utilise simplement un lien et l’appelle comme un élément de bloc. Je reçois toujours quelques commentaires désagréables sur cette technique, si vous voulez utiliser une entrée, soyez mon invité!
CSS
Pour le CSS, j'ai simplement défini la police sur Helvetica, vérifié que le texte était en blanc et désactivé toute décoration de texte par défaut (soulignement) pour les liens.
Bouton croissant
Notre première expérience de bouton est l’un de mes favoris. Bien que nous attendions presque toujours un effet de survol lorsque nous survolions un lien ou un bouton sur le Web, nous attendons généralement quelque chose d'assez subtil, donc celui-ci vient avec une belle surprise: il change de forme!
L'idée de base est que vous avez un simple bouton avec un message, dans notre exemple, nous allons utiliser? Inscrivez-vous maintenant.? Ensuite, lorsque vous survolez le bouton, il s’agrandit horizontalement pour révéler une partie du message qui était initialement masqué. Voyons comment cela fonctionne.
CSS de base
Pour commencer, il suffit de donner à notre bouton une forme et une couleur de base. Ici, j'ai réglé la hauteur à 28px et la largeur à 115px, ajouté quelques marges et un rembourrage, et j'ai donné au bouton une légère bordure.
Fantaisie CSS3
Certaines personnes sont excitées lorsque vous utilisez trop de CSS sur un simple bouton. Pour cette raison, je sépare les longs styles CSS3 que je vais utiliser. Les styles de cette section sont totalement facultatifs et donnent simplement au bouton un aspect plus moderne et plus cool.
J'ai commencé avec une bordure-rayon de base de 15 pixels pour nous donner de beaux coins arrondis, puis j'ai ajouté une légère superposition de dégradé. Le dégradé commence en transparent et passe au noir. C’est un petit truc que j’utilise pour appliquer un dégradé de noircissement rapide qui fonctionne avec pratiquement toutes les couleurs de fond.
Animation CSS
Il est maintenant temps de configurer notre transition CSS. C’est assez simple, la chose la plus agaçante est que, comme ci-dessus, nous devons le répéter tant de fois! Ici, j'ai paramétré l'animation pour affecter tous les changements, la durée à une demi-seconde et la fonction de synchronisation pour faciliter.
Survolez CSS
Pour terminer, il suffit d’ajouter un style de survol qui élargit la largeur. J'ai mesuré 200px comme une largeur suffisante pour afficher le texte masqué. En survolant maintenant le bouton, vous obtenez une belle animation fluide qui révèle un message caché!
Changement de couleur simple
C'est la plus simple de toutes les animations de boutons CSS. C’est si simple que j’ai hésité à l’inclure, mais parce que c’est une option populaire, j’ai pensé que j’en ferais autant. Ce qui se passe ici, c’est que vous avez une couleur de fond qui change en survol, mais nous utilisons une transition comme celle ci-dessus pour progressivement décaler la couleur plutôt que d'avoir le changement soit immédiat.
CSS de base
Le CSS est très similaire à la dernière fois avec quelques changements notables. J'ai ajouté une couleur de fond différente et modifié légèrement la forme. J'ai également centré le texte et défini la hauteur de ligne sur la hauteur verticale du bouton pour le centrer.
Fantaisie CSS3
Encore une fois, nous avons des styles visuels complètement facultatifs. J'ai défini un peu moins de bordure de rayon, appliqué un dégradé d'arrière-plan similaire et ajouté l'élément supplémentaire d'une zone d'ombre. En utilisant rgba avec l'ombre, je l'ai mise en noir et ensuite réduit la transparence.
Animation CSS
Nous pouvons très bien utiliser la même configuration de transition que dans l'exemple précédent:
Survolez CSS
Pour terminer, appliquez simplement une couleur de fond différente en survol. Essayez de choisir une variante légèrement plus lumineuse de la couleur dans Photoshop pour que la transition soit jolie. Découvrez également 0to255.com pour un excellent outil qui vous aide à saisir les variations de couleur.
Décalage de l'image de fond
Celui-ci est vraiment intéressant et peut avoir des résultats très différents en fonction de votre sélection d’image de fond. Je vais utiliser un motif très subtil pour que l'effet soit assez subtil. Essayez d'utiliser quelque chose de plus audacieux pour un résultat final plus fou.
Voici l'essentiel: vous appliquez une image d'arrière-plan au bouton, puis vous déplacez la position de cet arrière-plan au survol. Mélanger dans une transition et vous obtenez un bel effet de défilement.
CSS de base
Pour la plupart, ceci est juste comme l'exemple précédent. Cependant, notez que nous avons maintenant une image d’arrière-plan appliquée (elle sera répétée par défaut). J'ai défini la position d'arrière-plan initiale sur? 0 0? juste pour que vous puissiez avoir une idée de la façon dont cela va fonctionner. Lorsque nous définirons les styles de survol plus tard, nous déplacerons simplement cette position verticalement.
CSS fantaisie
Il n’ya rien de spécial ici que nous n’ayons pas encore passé en revue, juste quelques coins arrondis et une ombre.
Animation CSS
Une fois encore, nous utilisons le même extrait pour notre animation. Cette fois-ci, j'ai augmenté la durée à 0,8 seconde pour qu'elle dure un peu plus longtemps.
Survolez CSS
Il est maintenant temps de changer cette position d'arrière-plan. Rappelez-vous que nous avons commencé à? 0 0 ?. Nous allons maintenant déplacer l'image verticalement en définissant le second nombre sur 150px. Si nous voulions décaler la position horizontale, nous changerions le premier nombre.
Bouton 3D pressé
Pour notre dernier tour, nous allons imiter une conception de bouton 3D populaire qui ressemble à une pression lorsque vous la survolez. Cette animation est si simple que nous n’avons même pas besoin de transitions CSS, mais le produit final reste une animation assez agréable, bien que instantanée.
CSS de base
Voici le CSS de base pour notre dernier bouton. Notez que cet exemple et le dernier exemple utilisent des ombres de texte subtiles pour que le texte se démarque un peu plus.
CSS fantaisie
Cette fois, le CSS sophistiqué n'est pas facultatif. Si vous souhaitez obtenir cet effet, vous aurez au moins besoin de l'ombre et du dégradé. L'ombre dure est ce qui donne au bouton le faux effet 3D. Ce n’est pas l’illusion la plus convaincante, mais c’est quand même un joli bouton.
Survolez CSS
Ceci est notre plus gros morceau de hover CSS à ce jour. Fondamentalement, nous réduisons la longueur de l'ombre et compensons cette transformation avec une marge. Cela donne l’illusion que le bouton est enfoncé. Inverser le dégradé contribue également à l'illusion.
Conclusion
Après avoir parcouru ce bref didacticiel, vous devez maîtriser parfaitement la mise en œuvre des styles CSS3 de base pour donner à un bouton une apparence attrayante. Vous devez également avoir une bonne compréhension du fonctionnement des transitions CSS et de ce qui est nécessaire pour les rendre compatibles entre plusieurs navigateurs. Enfin, vous devriez avoir des idées géniales pour créer des effets de survol très sympas.
Laissez un commentaire et laissez-moi savoir ce que vous pensez. Avez-vous utilisé des effets similaires dans le passé? Comment modifieriez-vous ou amélioreriez-vous ces exemples?