Boutons CSS. Avantages Styles. Esthétique

Probablement pas un seul site ne peut se passer deboutons à vos autres pages. Tout le monde veut attirer l'attention sur son site et, en même temps, divers moyens sont utilisés. Dans la conception Web, ils incluent la conception des boutons, qui diffèrent par divers paramètres - taille, forme et effets, etc.

Les boutons CSS sont les plus pratiques. En quelques instants, leur style peut être complètement changé. Et, bien sûr, cela offre des opportunités supplémentaires pour la conception du site dans son ensemble.

Pour commencer, afin d'éviter toute confusion et tout malentendu, il convient de comprendre certains concepts.

CSS c'est quoi

CSS, qui signifie "feuilles de style en cascade" en traduction, est aujourd'hui l'une des principales technologies sur Internet. Au moins un site est peu susceptible de se passer de cette langue.

Le code CSS est une instruction pour les navigateurs contenant des informations sur la manière d’afficher des éléments sur une page et sur l’endroit où le faire.

Il est pratique de stocker ces instructions dans un fichier séparé portant l’extension .css. D'autre part, vous pouvez les mettre au début du document HTML.

Bouton sur le site. Comment est-ce

Bouton ou élément graphique pour la navigationdu site, devrait attirer l’attention sur le visiteur pour s’assurer que les informations qui l’intéressent se cachent derrière celui-ci, et j’aimerais en outre cliquer dessus. Quand il sera suffisamment lumineux et visible, ils le remarqueront certainement. Un tel bouton peut inciter les visiteurs, par exemple, à laisser votre avis sur le site ou à envoyer une application, à s'abonner à une newsletter intéressante et, bien entendu, à un simple transfert vers la section du site demandée par l'utilisateur.

Les boutons sont statiques, animés, dynamiques, avec et sans son.

Ils peuvent être spécialement créés, par exemple dans Photoshop, et téléchargés sur l'image du site. Vous pouvez également les créer facilement et rapidement en CSS.

Boutons CSS

Faire ces boutons est très simple. Le grand avantage de leur application est qu’elles peuvent être modifiées à tout moment, même en quelques secondes.

Comme vous le savez, les boutons ont trois positions:

• la paix quand ils ne font rien avec elle, mais parcourent simplement la page;
• position avec le curseur planant dessus;
• et activation lorsque vous cliquez dessus.

Les boutons seront entièrement affichés exactement dans cesdes navigateurs comme Firefox, Safari, Opera, Chrome. Dans le même temps, dans Internet Explorer 9, les boutons ne peuvent pas être affichés complètement. Par exemple, l’arrondi des coins, l’ombre du texte et le contour du bouton ne seront pas visibles ici car ces propriétés ne sont pas prises en charge par ce navigateur. Cependant, en général, les boutons CSS du site ont l’air correct dans cette version du navigateur. Dans Internet Explorer 8 et les autres versions inférieures à la huitième, le bouton ne verra pas le volume, mais en même temps, la visibilité des dégradés restera.

Si vous comparez le bouton en tant qu’image et le boutonCSS, la différence d’espace serveur sera totalement sans conséquence. Mais les boutons CSS réduiront le nombre de requêtes adressées au serveur, ce qui constituera déjà un avantage certain par rapport au bouton sous la forme d’une image.

Il s'avère que même si le soutien de certainsEtant donné qu'il n'y a pas de propriétés CSS dans les navigateurs Internet Explorer, ces boutons auront toujours l'air plus avantageux que les images simples, car la seule chose que perdront les utilisateurs d'Internet Exporer est de voir l'esthétique des technologies modernes de conception Web. Mais c’est une faille complètement insignifiante.

Chaque style a son propre style. Ces styles sont écrits dans un fichier .css spécial ou entre les balises head de la page du site.

Bouton place sur le site

Entre les balises body, le code s’écrit:

où

id = ”bouton2” signifie ici le nom attribué au bouton,

href = "HYPERLINK" fournit ici un lien direct vers le document requis,

TEXT - le texte est imprimé, ce qui sera affiché sur le bouton.

Styles de boutons

1. Le style du bouton CSS est écrit séparément dans le document ou dans la page elle-même:

2. Premièrement, les boutons CSS sont écrits quand ils sont au repos:

3. Ensuite, les paramètres correspondant au bouton sont écrits lorsque le curseur le survole. Si dans ce cas, seuls la couleur et le remplissage changent, dans le style, tout reste identique, à l'exception de la couleur et du remplissage:

4. Et le dernier paramètre concerne la position du bouton lorsque le curseur est appuyé dessus. Souvent, dans de tels cas, seul un minimum change, par exemple la couleur, comme dans ce cas:

CSS - beaux boutons

Vous pouvez utiliser un dégradé pour créer des boutons. Il est préférable de commencer par dessiner un bouton dans un éditeur graphique, par exemple Photoshop, pour savoir exactement ce que cela donnera. Si vous utilisez Photoshop, certains dégradés sont initialement disponibles, mais vous pouvez également en télécharger d'autres, tels que ceux que vous souhaitez obtenir sur le site.

En expérimentant avec du code CSS et en modifiant divers paramètres, il est possible de changer les beaux boutons CSS, et en sélectionnant le résultat souhaité.

Ces paramètres sont:

- couleur du texte sur le bouton;

- taille du texte et boutons;

- couleur du dégradé du bouton;

- rayon des coins des boutons;

- et la couleur de son coup.

En fait, vous pouvez calmement, sans crainte, expérimenter et choisir la meilleure option. Malgré le petit nombre de paramètres, vous pouvez créer des boutons très divers dans leur style.