Magnifique commutateur CSS. Faire des boutons élégants. Code CSS de base
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 moi-même essayés. 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. Il ne comporte 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, Transform, est responsable de la transformation du bouton - rotation, déplacement, distorsion.
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.
Bonjour, chers lecteurs. Ce jour-là, nous créerons un ensemble de belles icônes pour le site utilisant CSS3 et animation. Grâce à ce bouton, vous pouvez transformer n'importe quel lien de la page en un bouton animé avec un simple nom de classe. En général, il n'y a rien de compliqué ici, comme à première vue.
Juste un rappel que ces boutons sont gratuits et que vous pouvez téléchargement gratuit. Allons-y.
Boutons CSS3 animés pour votre site Web
Quelques mots maintenant sur la taille et les coins arrondis des boutons :
/* Trois tailles de boutons */ .button.big ( font-size:30px;) .button.medium ( font-size:18px;) .button.small ( font-size:13px;) /* Coins arrondis des boutons */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; )
Dans le code ci-dessus, il y a trois classes : grand, moyen Et petit. En conséquence, nous définissons différentes valeurs en pixels pour chaque classe. Tout est clairement visible dans le code ci-dessus.
Vient maintenant la partie amusante : les couleurs. Ici, en principe, il n'y a rien de compliqué non plus.
/* Bouton bleu */ .blue.button( color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Couleur d'arrière-plan de sauvegarde */ background-color: #48b5f2; background-image: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(centre en bas, cercle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(# 4fbbf7, #3faeeb); image d'arrière-plan : url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, de (rgba(89,208,244,1)), à(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, de(#4fbbf7), à(#3faeeb)); ) .blue.button:hover( background-color:#63c7fe; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(centre en bas, cercle, rgba (109 217 250,1) 0,rgba(109 217 250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); image d'arrière-plan : url("button_bg.png"), url("button_bg.png" ), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, de(rgba(109,217,250,1)), à(rgba(109,217,250,0))), -webkit-gradient(linéaire , 0% 0%, 0% 100%, de(#63c7fe), à(#58bef7)); )
C'est tout pour l'instant. Je voudrais vous avertir à l'avance qu'actuellement, les boutons peuvent ne pas fonctionner dans certains navigateurs, car tous ne prennent pas encore en charge CSS3. Mais il me semble que ce problème sera bientôt résolu.
Aujourd'hui, je veux vous expliquer comment créer des boutons élégants en utilisant du CSS pur. Nous allons créer 4 styles, ce sont des boutons remplis d'une seule couleur, des boutons entourés d'une bordure, un style de bouton avec une ombre et un remplissage, et les 4 derniers styles sont des boutons avec un effet de clic. Nous ferons tout cela sans utiliser de scripts, en utilisant uniquement CSS.
Démo Ι
Code HTML pour les boutons
Le code HTML que nous utiliserons est très simple. Pour chacun des boutons, nous définirons des classes distinctes. Nous définirons également des classes pour appliquer l'effet lors du survol et de l'activation de notre futur bouton. En général, voici le code lui-même :
Styles CSS pour tous les boutons
Différents navigateurs affichent certaines règles CSS standard de manière légèrement différente. Par conséquent, dans le code CSS suivant, nous réinitialiserons tous les styles et ajouterons quelques valeurs par défaut. Voici à quoi ressemble le code :
Bouton (affichage : bloc en ligne ; marge : 0 10px 0 0 ; remplissage : 15px 45px ; taille de la police : 48px ; famille de polices : "Bitter", serif ; hauteur de ligne : 1,8 ; apparence : aucun ; ombre de la boîte : aucun ; border-radius : 0 ; ) bouton : focus ( contour : aucun )
Ce n'est pas difficile du tout. Eh bien, examinons maintenant de plus près chacun des 4 styles de nos boutons élégants.
Boutons plats remplis de fond
Ce type de bouton est très populaire de nos jours, car il répond à toutes les tendances modernes du web design. En d’autres termes, il s’agit d’un style plat ou d’un design plat. De plus, les gens sont habitués à de tels boutons et cliquent volontiers dessus.
Cette image montre les trois états du bouton : normal (par défaut), au survol et au clic ou à l'action :
Le code CSS de ces boutons est très simple. Cela me semble être un énorme plus :
Bouton Section.flat ( couleur : #fff ; couleur d'arrière-plan : #6496c8 ; ombre du texte : -1px 1px #417cb8 ; bordure : aucune ; ) bouton section.flat : survol, section.flat bouton.hover ( couleur d'arrière-plan : #346392 ; texte-ombre : -1px 1px #27496d ; ) section.flat bouton : actif, section.flat bouton.active ( couleur d'arrière-plan : #27496d ; texte-ombre : -1px 1px #193047 ; )
Boutons de style avec bordures ou bordures
Ce style de boutons appartient à la même classe que les boutons plats. La seule différence est que nous supprimons ici le remplissage et définissons à la place des règles pour afficher la bordure des boutons. Cette image montre tout clairement :
Et comme d'habitude le code CSS est très simple, on ajoute juste des règles pour que la bordure apparaisse :
Bouton Section.border ( couleur : #6496c8 ; arrière-plan : rgba(0,0,0,0) ; bordure : solide 5px #6496c8 ; ) bouton section.border : survol, section.border bouton.hover ( border-color : # 346392 ; couleur : #346392 ; ) bouton section.border : actif, section.border bouton.active ( couleur de la bordure : #27496d ; couleur : #27496d ; )
Boutons avec ombre et dégradé en CSS
Ce style de boutons peut facilement être qualifié de obsolète, mais on le trouve encore aujourd'hui sur Internet. Si ces boutons correspondent au style de votre site, alors ils sont faits pour vous. Ils sont également très faciles à réaliser, voici une image :
En CSS, nous utiliserons des règles de remplissage d'ombre et de dégradé. Au survol, une ombre apparaîtra autour du bouton et lorsque vous cliquerez à l'intérieur.
Bouton Section.gradient ( couleur : #fff ; ombre du texte : -2px 2px #346392 ; couleur d'arrière-plan : #ff9664 ; image d'arrière-plan : dégradé linéaire (haut, #6496c8, #346392); ombre de la boîte : encart 0 0 0 1px #27496d ; bordure : aucune ; border-radius : 15px ; ) section.gradient bouton : survol, section.gradient bouton.hover ( box-shadow : encart 0 0 0 1px #27496d,0 5px 15px #193047 ; ) bouton section.gradient: actif, section.gradient bouton.active ( box-shadow: encart 0 0 0 1px #27496d,encart 0 5px 30px #193047; )
Effet de clic élégant
Ce style est également très populaire aujourd’hui et est largement utilisé dans la conception de sites Web. Il semble à l'utilisateur que le bouton est réellement enfoncé. Ici vous pouvez voir les détails dans l'image :
Le CSS ici est un peu plus complexe et nécessite un peu de mathématiques. Mais cela se comprend facilement. En général, ce n’est pas si effrayant. Nous placerons une ombre non floue sous le bouton afin qu'elle donne l'effet d'un bouton 3D ou qu'elle paraisse un peu dépasser. Lorsque vous survolez les boutons, nous rendrons l'arrière-plan plus sombre. Et lorsque l'utilisateur clique sur le bouton, nous modifierons la position du bouton lui-même dans les styles. Et pour rendre le tout plus impressionnant et plus fluide, nous ajouterons une transformation CSS3 (translateY). De cette façon, le bouton descendra en douceur. Et voici le code CSS lui-même :
Bouton Section.press ( couleur : #fff ; couleur d'arrière-plan : #6496c8 ; bordure : aucune ; rayon de bordure : 15px ; ombre de la boîte : 0 10px #27496d ; ) bouton section.press : survol, section.press bouton.hover (couleur d'arrière-plan : #417cb8) section.press bouton : actif, section.press bouton.active (couleur d'arrière-plan : #417cb8 ; ombre de la boîte : 0 5px #27496d ; transformation : traduireY(5px); )
Démo Ι
Conclusion
C'est ça! Vous disposez désormais de boutons élégants et modernes que vous pouvez utiliser selon vos besoins. Naturellement, vous pouvez les modifier jusqu'à ce qu'ils deviennent méconnaissables, ce n'est que l'exemple le plus simple de mise en œuvre de ce genre de boutons. J'espère que vous avez apprécié cette leçon. À bientôt!
Avant d’examiner les boutons, examinons les paramètres communs à tous.
HTML
Les boutons utiliseront du code HTML très simple :
S'abonner
CSS
De plus, tous les boutons auront des paramètres communs pour le texte de la légende et les liens de désélection :
ButtonText ( police : 18px/1.5 Helvetica, Arial, sans-serif ; couleur : #fff ; ) a ( couleur : #fff ; décoration de texte : aucune ; )
En règle générale, l'utilisateur s'attend à un effet assez doux lorsqu'il passe la souris sur un lien ou un bouton. Et dans notre cas, le bouton change de taille - il augmente, affichant un message supplémentaire.
Code CSS de base
Pour commencer, il suffit de donner une forme et une couleur au bouton. Définissez une hauteur de 28 px et une largeur de 115 px, ajoutez des marges et un remplissage, et donnez également au bouton une bordure claire.
#button1 ( arrière-plan : #6292c2 ; bordure : 2px solide #eee ; hauteur : 28px ; largeur : 115px ; marge : 50px 0 0 50px ; remplissage : 0 0 0 7px ; débordement : caché ; affichage : bloc ; )
Effets CSS3
Certaines personnes aiment qu'un simple bouton soit accompagné de beaucoup de code CSS. Cette section fournit des styles CSS3 supplémentaires pour notre bouton. Vous pouvez vous en passer, mais ils donnent au bouton un look plus moderne.
Arrondissez les coins du cadre et ajoutez un dégradé. Cela utilise une petite astuce avec un dégradé sombre qui interagit avec n'importe quelle couleur d'arrière-plan.
/*Coins arrondis*/ -webkit-border-radius : 15px ;
-moz-border-radius : 15px ;
rayon de bordure : 15 px ;
/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : dégradé linéaire (haut, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2));
Animation CSS
Configurons maintenant la transition CSS. L'animation sera utilisée pour tout changement de propriété et durera une demi-seconde.
Passez la souris
Effets CSS3
Il ne reste plus qu'à ajouter un style pour développer le bouton lorsque vous passez la souris dessus. Le bouton doit avoir une largeur de 230 px pour afficher l’intégralité du message.
/*Coins arrondis*/ -webkit-border-radius : 10px ;
-moz-border-radius : 15px ;
-moz-border-radius : 10px ;
rayon de bordure : 10 px ;
/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Animation CSS
image d'arrière-plan : -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
image d'arrière-plan : dégradé linéaire (haut, rgba (0, 0, 0, 0), rgba (0, 0, 0, 0,2));
Effets CSS3
/*Ombre*/ -webkit-box-shadow : 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow : 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-border-radius : 15px ;
box-shadow : 0px 3px 1px rgba(0, 0, 0, 0.2);
L'animation n'est pratiquement pas différente de l'exemple précédent.
/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Il est maintenant temps de déplacer l'image d'arrière-plan. La position de départ était "0 0". Définissez le deuxième paramètre sur 150px. Pour vous déplacer horizontalement, vous devez modifier le premier paramètre.
#bouton3: survol (position d'arrière-plan : 0px 150px ; )
Simulation d'appui sur un bouton 3D
Le dernier exemple de notre leçon concerne la méthode 3D populaire consistant à simuler une pression sur un bouton lorsque vous passez le curseur de la souris dessus. L'animation dans ce cas est si simple qu'elle ne nécessite même pas de transition CSS. Mais le résultat final est assez impressionnant.
Animation CSS
Code CSS pour notre bouton.
#button4 (arrière-plan : #5c5c5c ; ombre du texte : 0px 2px 0px rgba(0, 0, 0, 0.3); taille de la police : 22px; hauteur : 58px; largeur : 155px; marge : 50px 0 0 50px ; débordement : caché ; affichage : bloc ; texte-align : hauteur de ligne : 58 px ;
Effets CSS3
Dans ce cas, CSS3 cesse d’être une option intéressante. Pour obtenir cet effet, des ombres et un dégradé sont nécessaires. Une ombre nette crée l’apparence d’un bouton 3D.
/*Coins arrondis*/ -webkit-border-radius : 5px ;
/*Dégradé*/ image d'arrière-plan : -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
-moz-border-radius : 5px ;
rayon de bordure : 5 px ;
Bonjour chers lecteurs. Nous avons déjà étudié de nombreuses propriétés apparues dans CSS3, mais il ne suffit pas de les connaître. Il faut absolument s'entraîner ! Et aujourd'hui, je vais vous montrer...
Ouvrons le fichier index.html et créer une structure simple
Rien de spécial. Juste 3 bloquer avec classe .bouton Passons maintenant aux styles.
Corps (
}
Bouton (
affichage : bloc en ligne ;
marge : 40px ;
largeur : 100 px ;
hauteur : 100px ;
arrière-plan : url(http://subtlepatterns.com/patterns/extra_clean_paper.png) ;
curseur : pointeur ;
rayon de bordure : 50 % ;
encart 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
encart 0 0 20px rgba(0,0,0,.1);
}
J'ai pris l'arrière-plan du document et nos boutons du site subtilpatterns.com.
Nous faisons le nôtre div inline-block, pour qu'ils s'alignent horizontalement, nous définissons leur hauteur, leur largeur, leur décalage par rapport aux bords du navigateur, leur arrondi 50% pour obtenir un cercle, et en survolant le curseur, nous faisons aiguille. Il n'y a rien de compliqué ici, mais ce n'est pas pour rien que j'ai séparé l'ombre dans les styles, car C'est exactement la partie qui peut poser des difficultés, même si là aussi tout est simple, et vous le verrez maintenant.
Après avoir posé la première ombre, nous verrons déjà le contour de notre cercle :
Box-shadow : 0 3px 20px rgba(0,0,0,.25);
Ensuite, nous demandons ombre intérieure, de sorte que nous ayons une telle fenêtre en haut et que le bouton devienne plus volumineux.
Ombre de la boîte : 0 3px 20px rgba(0,0,0,.25),
encart 0 2px 0 rgba(255,255,255,.6);
L'ombre extérieure suivante est nécessaire pour assombrir légèrement la zone sous le bouton ci-dessous, et l'ombre intérieure suivante assombrit l'espace à l'intérieur du bouton pour un plus grand effet)
Ombre de la boîte : 0 3px 20px rgba(0,0,0,.25),
encart 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
encart 0 0 20px rgba(0,0,0,.1);
Comme vous pouvez le constater, au début, cela semble compliqué, il existe de nombreuses propriétés, mais si vous y regardez bien, tout s'avère beaucoup plus simple. Voici donc notre résultat final :
Implémentons maintenant le comportement en survol par bloc
Bouton : survoler (
box-shadow : encart 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
encart 0 2px 0 rgba(0,0,0,.1);
}
Nous avons déjà traité des ombres dans le bloc, essayez maintenant de comprendre par vous-même ce qui se passe lorsque vous survolez. De même, laissez une seule ombre et voyez ce qui se passe, puis ajoutez-en une seconde et voyez ce qui change, et ainsi de suite.
Enfin, ajoutons des icônes à nos boutons pour que cela ne devienne pas trop ennuyeux. Pour ce faire, changeons un peu HTML
Btn-photo (
arrière-plan : url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) centre centre sans répétition ;
}
Paramètres Btn (
arrière-plan : url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) centre centre sans répétition ;
}
Balise Btn (
arrière-plan : url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) centre centre sans répétition ;
}
Ici on ajoute simplement un deuxième fond pour chaque bouton, en reprenant les icônes du site defaulticon.com.
C'est ça. Aujourd'hui, nous avons regardé comment créer des boutons ronds en CSS3.