Bonjour, chers amis. Aujourd'hui, je vais vous parler de deux manières qui vous aideront à créer un bouton animé pour vos sites Web. Vous avez probablement vu beaucoup de ces boutons et cliqué dessus. Ainsi, sur mon blog, je recommande périodiquement des cours et formations d'affiliation, uniquement ceux que j'ai essayés moi-même. Et bien sûr, je m'intéresse aux statistiques, et les statistiques disent que les gens cliquent sur des boutons attrayants 48 % plus souvent que sur des liens classiques.

Le principe de création de boutons animés en CSS est le suivant, il y a trois dispositions. 1 - Initiale, 2 - en survolant le curseur et 3 - en appuyant sur le bouton de la souris. Certains services comportent les trois dispositions, tandis que d’autres n’en ont que deux. Mais l’essentiel est que vous soyez satisfait du résultat final.

Tutoriel vidéo sur la deuxième méthode de création de boutons animés :

À titre d'exemple, regardons le service CSS3 ButtonGenerator qui n'a que deux dispositions : Mais les effets semblent très bons. Qui est confus par le manque de langue russe, utilisez le dernier générateur donné dans la liste.

Alors commençons.

Ouvrez la page principale du service. Dans un premier temps, vous verrez une vue préliminaire du bouton et des outils qui vous permettent d'effectuer toutes sortes de réglages.

La première section, Text&Font, est responsable du texte, de la taille de la police, de la couleur de la police et de l'ombre de la police. C'est ici que vous écrivez l'étiquette sur le bouton, définissez sa taille, sa couleur et son ombre.

La section suivante, Contexte, fait référence à l'arrière-plan. Ici, vous pouvez spécifier la couleur du bouton, le dégradé du bouton, la taille du bouton et le mélange d'arrière-plan.

La section Border est responsable de la définition de l'ombre et des bordures du bouton. Vous pouvez facilement ajuster l’épaisseur de la bordure, l’arrondi des coins et l’ombre du bouton.

La section suivante, Transformer, est responsable de la transformation du bouton : rotations, déplacements et distorsions.

La section suivante, Transition, est responsable de la fluidité de l'animation. Vous définissez ces paramètres en fonction de votre bouton. Les actions peuvent être appliquées à l’ensemble du bouton ou à des calques individuels.

Après avoir essayé plusieurs fois, expérimenté les paramètres et vous comprendrez de quoi il s'agit.

Une fois l’apparence initiale du bouton configurée, vous pouvez passer à l’étape suivante. Il s'agit d'une modification du bouton lors du survol du curseur de la souris. Pour ce faire, cliquez sur la case indiquée dans la capture d'écran.

Options de survol de la souris

Désormais, toutes les modifications que vous apportez aux paramètres concernent le bouton qui s'affichera lorsque vous passerez la souris dessus. Et ces paramètres dépendent individuellement de chaque bouton. À titre d'exemple, j'ai modifié les paramètres de rotation, de dégradé et de couleur d'ombre.

Lorsque le bouton est prêt, vous pouvez procéder à l'installation du bouton dans l'article. Pour cela, installez le code à l'endroit souhaité dans l'article :

Voici notre exemple :

Eh bien, vous savez maintenant comment créer facilement et rapidement un bouton animé pour un site Web ou un blog. Essayez de mettre en œuvre, ça vaut le coup. Si vous avez des questions, écrivez dans les commentaires, je vais essayer de vous aider.

C'est tout pour aujourd'hui, je vous souhaite bonne chance. Et je suis toujours heureux de vous voir sur les pages de mon blog.

P.S. Et voici un exemple de bouton animé pour la formation de Denis Gerasimov « Mise en place de trafic froid pour promouvoir les liens d'affiliation ». J'ai suivi cette formation et je la recommande à tout le monde - sans exagération inutile, c'est un véritable moyen de gagner de l'argent grâce aux programmes d'affiliation. C’est essentiellement ce que je fais.

Vlad Merjevitch

Boutons standards créés via tag ou , bien sûr, mais essayer de changer leur apparence à travers les styles conduit à un résultat terrible. Les boutons sont un clin d'œil aux interfaces d'il y a dix ans avec leur angulaire (Fig. 1). Bien entendu, une telle métamorphose ne se produit que lors de l'utilisation des propriétés background et border, en d'autres termes, vous ne pouvez pas modifier la couleur d'arrière-plan du bouton et la bordure qui l'entoure.

Riz. 1. Bouton original et modifié

Vous pouvez utiliser des images pour changer radicalement l’apparence d’un bouton, mais comparée aux capacités de CSS 3, cette option semble désormais native.

Je prendrai comme base le bouton d'origine du navigateur, qui contient un dégradé vertical linéaire et des bords arrondis.

Le moyen le plus simple d'arrondir les coins consiste à utiliser la propriété border-radius, en lui donnant le rayon d'arrondi souhaité. Comme d'habitude, cela ne fonctionne pas dans tous les navigateurs, vous devrez donc ajouter l'ensemble complet. Le résultat est le suivant.

Rayon de bordure Moz : 5 px ; /* Firefox */ -webkit-border-radius : 5px ; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */

L'apparence des boutons dans différents navigateurs est illustrée à la Fig. 2.

Riz. 2. Boutons aux coins arrondis

En général, tout est attendu. Les anciennes versions d'IE ne supportent pas CSS 3, les autres créent correctement les coins dont j'ai besoin. Pour une raison quelconque, Opera n'affiche pas l'arrière-plan par défaut, comme le font d'autres navigateurs, mais Opera sera discuté séparément.

Maintenant, la partie amusante consiste à créer un dégradé linéaire vertical. Pour ce faire, des styles individuels pour chaque navigateur seront à nouveau utilisés.

arrière-plan : -moz-linear-gradient(#00BBD6, #EBFFFF) ;

Un dégradé spécifie un point de départ, un angle de dégradé, une couleur de départ et une couleur de fin. Dans notre cas, lorsque le dégradé va verticalement de haut en bas, il suffit de définir uniquement les couleurs, le reste des paramètres est utilisé par défaut.

Chrome, Safari

arrière-plan : -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));

Ici, vous spécifiez le type de dégradé (linéaire), le point de départ de l'application du dégradé (coin supérieur gauche), le point final (coin inférieur gauche), ainsi que les couleurs de début et de fin.

Internet Explorer

filtre : progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");

Le navigateur IE suit sa propre voie et utilise la propriété filter pour divers effets, y compris le dégradé. Ici tout est plus trivial, seules les couleurs de début et de fin du dégradé sont écrites.

Opera est au repos ; les dégradés n'ont pas encore été implémentés.

Nous regroupons toutes les propriétés des navigateurs, des coins et des dégradés (exemple 1).

Exemple 1 : boutons de dégradé linéaire

Bouton Accueil

Nouveau bouton

Cela s'est avéré plutôt joli (Fig. 3), mais il existe également des différences évidentes par rapport au bouton d'origine : il a l'air plat, comme une planche.

Riz. 3. Vue des boutons avec dégradé

Vous pouvez à nouveau réaliser un bouton de la forme souhaitée en utilisant un dégradé, en « jouant » avec les couleurs. Deux valeurs de dégradé ne suffisent plus, heureusement Firefox et Safari proposent une solution.

arrière-plan : -moz-linear-gradient(#D0ECF4, #5BC9E1, #D0ECF4) ;

Au lieu de deux valeurs, insérez le nombre de couleurs souhaité, le dégradé passera en douceur d'une couleur à l'autre.

Chrome, Safari

arrière-plan : -webkit-gradient(linéaire, 0 0, 0 100 %, de(#D0ECF4), à(#D0ECF4), color-stop(0.5, #5BC9E1));

Le paramètre color-stop spécifie le point auquel la nouvelle couleur sera appliquée. La valeur varie de 0 à 1.

Exemple 2 : Boutons avec dégradé amélioré

HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx

Bouton Accueil

Nouveau bouton

Le résultat de l'exemple est présenté sur la Fig. 4.

Riz. 4. Dégradé, quel type de dégradé est nécessaire

De même, vous pouvez créer n'importe quel autre dégradé sur un bouton ou un autre élément (Fig. 5). Mais faites-le vous-même, c'est pourquoi je l'ai ajouté à l'atelier.

Riz. 5. Des boutons si différents

Permettez-moi de résumer. Vous pouvez créer un bouton avec un dégradé et des coins arrondis sans images. Cependant, il existe une confusion et des hésitations avec les navigateurs. Opera ne peut pas du tout fonctionner avec des dégradés ; dans IE 9, il y a un bug désagréable lors de la combinaison d'un dégradé avec des coins (Fig. 6).

Riz. 6. Superposer l'arrière-plan sur les coins dans IE 9

Eh bien, pour l'instant, nous allons créer des « beautés » pour les navigateurs Firefox, Safari et Chrome.

• Traduction

Bonjour, cher ami Habra ! Aujourd'hui, nous allons apprendre à créer des boutons 3D CSS3 ! Ceux-ci sont basés sur le populaire Freebie PSD d'Orman Clark pour son site Web Premium Pixels. Nous allons essayer de dupliquer ces boutons en utilisant CSS avec un minimum de code HTML.

Étape 1 : Créer un document HTML

Nous allons commencer par créer un nouveau document HTML. Il sera basé sur le modèle HTML5 afin que nous ayons un point de départ simple. Nous allons maintenant ajouter une liste avec des liens. C'est essentiellement tout, grâce à CSS3 de ne pas avoir à utiliser de divs et de spans supplémentaires.
Nous attribuerons une classe « boutons » à chaque élément de la liste. Et comme Orman a utilisé des couleurs différentes, nous attribuerons à chaque bouton sa propre couleur en tant que classe.

• Télécharger
• Télécharger
• Télécharger
• Télécharger
• Télécharger
• Télécharger
• Télécharger
• Télécharger
• Télécharger
• Télécharger

C'est tout ce dont nous avons besoin à ce stade.

Étape 2 : Règles CSS de base

Avant d’aborder les dégradés, les coins arrondis, etc., il y a quelques règles de base à respecter. Rien de spécial, juste du CSS2 classique :

Ul ( style de liste : aucun ; ) a.button ( affichage : bloc ; flotteur : gauche ; position : relative ; hauteur : 25px ; largeur : 80px ; marge : 0 10px 18px 0 ; décoration de texte : aucun ; police : 12px" Helvetica Neue", Helvetica, Arial, sans-serif ; poids de la police : gras ; hauteur de la ligne : 25 px ; alignement du texte : centre ; )
Appliquons maintenant les règles pour les différentes couleurs. Par exemple, pour le gris. Toutes les autres couleurs peuvent être visualisées dans la démo.
/* GRIS */ .gray, .gray:hover ( couleur : #555 ; bordure inférieure : 4px solid #b2b1b1 ; arrière-plan : #eee ; .gray:hover ( arrière-plan : #e2e2e2 ; ) )
Vous devriez vous retrouver avec quelque chose comme ça. Ça a l'air plutôt solide, si c'est 2008.

Étape 3 : Doubles cadres !

Si vous regardez attentivement le résultat final, vous verrez qu'il y a une fine ligne autour du périmètre de tout le bouton. Pour obtenir cet effet, nous utiliserons des pseudo-éléments :avant Et :après.
a.button ( affichage : bloc ; flotteur : gauche ; position : relative ; hauteur : 25px ; largeur : 80px ; marge : 0 10px 18px 0 ; décoration de texte : aucune ; police : 12px "Helvetica Neue", Helvetica, Arial, sans -serif ; poids de la police : gras ; hauteur de la ligne : 25 px ; alignement du texte : centre ; a.bouton : avant, a.bouton : après (contenu : " ; position : absolue ; gauche : -1 px ; hauteur : 25 px ; largeur : 80 px ; bas : -1 px ; ) a.bouton : avant ( hauteur : 23 px ; bas : -4 px ; bordure supérieure : 0 ; )
En ajoutant de la couleur, les boutons sont bien plus beaux.
/* GRIS */ .gray, .gray:hover ( couleur : #555 ; bordure inférieure : 4px solide #b2b1b1 ; arrière-plan : #eee; ) .gray:avant, .gray:après ( bordure : 1px solide #cbcbcb; bordure inférieure : 1px solide #a5a5a5 ; .gray:hover ( arrière-plan : #e2e2e2 ; )

Étape 4 : Un peu de magie CSS3

Passons maintenant à la partie CSS3 proprement dite. Commençons par les coins arrondis :
a.button ( affichage : bloc ; flotteur : gauche ; position : relative ; hauteur : 25px ; largeur : 80px ; marge : 0 10px 18px 0 ; décoration de texte : aucune ; police : 12px "Helvetica Neue", Helvetica, Arial, sans -serif ; poids de la police : hauteur de ligne : 25 px ; -webkit-border-radius : 3 px ;
Éléments naturels :avant Et :après il faut aussi des coins arrondis.
a.button:avant, a.button:after ( contenu : "" ; position : absolue ; gauche : -1px ; hauteur : 25px ; largeur : 80px ; bas : -1px ; -webkit-border-radius : 3px ; -moz -border-radius: 3px; border-radius: 3px; ) a.button:before (hauteur: 23px; bas: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz- rayon de bordure : 0 0 3px 3px ; rayon de bordure : 0 0 3px 3px ; -webkit-box-shadow : 0 1px 1px 0px -moz-box-shadow : 0 1px 1px 0px ; ;
Enfin, nous appliquerons des dégradés, une ombre intérieure et une ombre de texte. Pour éviter les bugs dans IE6, ajoutons state:visited.
/* GRIS */ a.gray, a.gray:hover, a.gray:visited ( couleur : #555 ; bordure inférieure : 4px solid #b2b1b1 ; texte-ombre : 0px 1px 0px #fafafa ; arrière-plan : #eee ; background: -webkit-gradient(linéaire, en haut à gauche, en bas à gauche, de(#eee), à(#e2e2e2)); background: -moz-linear-gradient(top, #eee, #e2e2e2) ; #f5f5f5; ) .gray:avant, .gray:après ( bordure : 1px solide #cbcbcb ; bordure inférieure : 1px solide #a5a5a5 ; ) .gray:hover ( arrière-plan : #e2e2e2 ; arrière-plan : -webkit- gradient(linéaire, en haut à gauche, en bas à gauche, de(#e2e2e2), à(#eee)); arrière-plan : -moz-linear-gradient(top, #e2e2e2, #eee )
Notre résultat final n'est pas trop mal !

Étape 5 : Avons-nous oublié quelque chose ?

Dans sa conception, Orman a également inclus un état : actif. Il suffit donc de l'ajouter à notre code.
Nous placerons cette partie du code sous les règles des différentes couleurs.
/* ÉTAT ACTIF */ a.button:active ( border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow : 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); a.button:active:before, a.button:active:after ( bordure : aucun ; - webkit -box-shadow : aucun ; -moz-box-shadow : aucun ;
Voici ce que nous obtenons :

Étape 6 (facultatif) : Anciens navigateurs

Nous avons donc créé de jolis boutons CSS3 qui fonctionnent dans tous les navigateurs modernes. Mais qu’en est-il d’Internet Explorer 8 et versions antérieures ? Ces navigateurs ne prennent pas en charge les ombres ou les dégradés de texte.
Pour résoudre ce problème, nous pouvons utiliser la bibliothèque javascript Modernizr, qui peut détecter si votre navigateur prend en charge CSS3 et HTML5. La bibliothèque ne résout pas le problème, elle propose simplement un style alternatif.
Tout d’abord, nous allons créer notre propre version de Modernizr afin de ne pas trimballer un énorme javascript. Cela peut être fait sur leur site Web. Une fois que nous avons inséré du javascript dans notre document, nous devons définir différentes règles de classe pour le style alternatif. Nous utiliserons des images pour les navigateurs qui ne prennent pas en charge le rayon de bordure et les dégradés.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visité, .no-borderradius a.button, .no-borderradius a.button:visité, .no-generatedcontent a.button, .no-generatedcontent a.button:visited ( arrière-plan: url(images/sprite.png) no-repeat 0 0px; hauteur: 32px; largeur: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( arrière-plan: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:actif, .no-borderradius a.button :active, .no-generatedcontent a.button:active ( background: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray: visité, .no-cssgradients a.gray: survol ( background-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink: visité, .no-cssgradients a.pink: survol ( background-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue: visité, .no-cssgradients a.blue: survol ( background-position-x : -164px ; ) .no-cssgradients a.green, .no-cssgradients a.green: visité, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.turquoise, .no- cssgradients a.turquoise:visité, .no-cssgradients a.turquoise:hover ( background-position-x: -328px; ) .no-cssgradients a.black, .no-cssgradients a.black:visité, .no-cssgradients a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visité, .no-cssgradients a.darkgray:hover ( background-position-x: - 492px; ) .no-cssgradients a.jaune, .no-cssgradients a.jaune: visité, .no-cssgradients a.jaune: survol ( background-position-x: -574px; ). , .no-cssgradients a.purple:hover ( background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visité, .no- cssgradients a.darkblue:hover ( arrière-plan -position-x : -738px ; ) .no-cssgradients a.button, .no-cssgradients a.button : visité, .no-cssgradients a.button : survol, .no-cssgradients a .button : avant, .no- cssgradients a.button: après, .no-borderradius a.button, .no-borderradius a.button: visité, .no-borderradius a.button: survol, .no-borderradius a.button : avant, .no-borderradius a .button: après, .no-generatedcontent a.button, .no-generatedcontent a.button: visité, .no-generatedcontent a.button: survol, .no-generatedcontent a.button: avant , .no-generatedcontent a.button :après ( bordure : 0 ; )

Conclusion

De cette façon, nous avons de jolis boutons CSS3 multi-navigateurs. Cela peut sembler beaucoup de code pour 10 boutons, mais ce n'est qu'une démonstration de ce que CSS3 peut et ne peut pas faire. Vous pouvez en faire ce que vous voulez ! J'espère que mon tutoriel vous a été utile, merci pour votre attention !