Header

Partagez | 

Création et décoration de boutons

Message Sujet: Création et décoration de boutons   Dim 29 Déc - 11:12

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Tutoriel écrit par Ketsuka

Création et Décoration de Bouton


Bonjour à tous et à toutes,
Je vous présente aujourd'hui différentes façons de réaliser des boutons design et originaux. Vous pouvez procéder de deux façons. La première consiste à utiliser une ou deux images et la seconde consiste à n'utiliser que du CSS3.

Quelques exemples



Avant de nous plonger dans l'explication, voici deux exemples que vous pourriez être capable de faire avec ce tuto :




Avec uniquement du CSS(3)


Tout d'abords, pour ceux qui ne souhaitent pas comprendre le CSS. Voici des générateurs de code CSS. N'hésitez pas à les utiliser pour vous simplifier la vie.
»Générateur de Debray Jerome (Cliquez ici)
»CSS3Button.net [Anglais] (Cliquez Ici)
»CSSButtonGenerator [Anglais] (Cliquez Ici)


Sinon, pour ceux qui aiment comprendre ce qu'ils font et qui préfèrent avoir le contrôle! Je vais exaucer leurs envies en leur expliquant le système qui est très simple. Pour commencer, nous allons donner un nom class à votre lien pour pouvoir lui appliquer des propriétés CSS. Dans ce cas, je choisis simplement "button". Voilà le résultat HTML.
Code:
<a class="button" href="URLDELAPAGE">Cliquez Ici</a>
Maintenant, passons à la partie CSS. Vous pouvez mettre ce code dans votre Fiche de Style CSS qui se trouve dans l'onglet Affichage du Panneau d'Administration ou entre les balises suivantes :
Code:
<style type="text/css"> </style>
Voici un code CSS qui nous est proposé par un doux invité :
Code:
.button{
        padding: 0px 2px 0px 2px;
        border-width: 1px 2px 2px 1px;
        border-style: solid;
        border-color: #edd #baa #baa #eed;
        background: #faf6f6;
        color: #000000;
}
Voilà comment personnaliser ce code selon vos envies.
padding: Gère la marge intérieure, ce qui veut dire l'espace entre le texte et la bordure du bouton. Le premier chiffre concerne la marge du haut, puis le suivant celle de droite, puis le suivant celle du bas, puis enfin le suivant celle de gauche.
border-width: Gère le relief de la touche ou plutôt, la largeur des bordures. Les chiffres sont dans le même ordre que ceux des marges. D'abords la bordure du haut, puis celle de droite, puis celle du bas, puis celle de gauche.
border-style: Gère le style des bordures: elles sont droites, en une ligne.
border-color: Gère les couleurs des bordures.
background: Gère la couleur de fond. Vous pouvez remplacer le code couleur par url('LienDeLImage') pour que la couleur soit remplacer par l'image dont vous avez placé le lien.
color: Gère la couleur du texte.

Avec du CSS et des Images: Voir Tutoriel


Vous devez également donner une class à votre lien. Voilà le résultat HTML.
Code:
<div class="bouton">
   <a href="URLDELAPAGE">Cliquez Ici</a>
</div>
Il vous faut deux images de préférences pour le changement d'aspect au survol du bouton (s'il est souhaité). Je prendrai les deux suivantes :

Elles doivent avoir la même taille! Ici 150px sur 50px.
Quant à lui, le CSS va changer:

Mammouthland a écrit:
Ces deux images ayant une taille de 150 pixels sur 50, il va falloir donner au sélecteur a la même taille. Petit problème, a est de type "inline", on ne peut lui affecter de taille. Il va donc falloir lui changer son statut par défaut pour lui conférer un comportement de type "block". On utilisera pour cela l'attribut display.

Autre astuce, pour pouvoir centrer le texte verticalement, au lieu de donner la hauteur avec un height, on va définir une hauteur de ligne (line-height), et ainsi on pourra appliquer un vertical-align:middle qui alignera le texte parfaitement.
Code:
.bouton a {
display:block;
width:150px;
line-height:50px;
text-align:center;
vertical-align:middle;
background:url(images/bouton-noir.png) no-repeat;
color:white;
text-decoration:none;
}
.bouton a:hover {
background:url(images/bouton-noir-2.png) no-repeat;
}
images/bouton-noir.png: Correspond à la première image plus haut
images/bouton-noir-2.png: Correspond à la deuxième image plus haut
width: Changer le chiffre par la largeur de votre propre bouton (images)
line-height: Changer le chiffre par la hauteur de votre propre bouton (images)




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Ketsuka, accepte qu'un directeur reposte le tutoriel "Création et Décoration de Bouton" tel que je l'ai rédigé.
Revenir en haut Aller en bas
Création et décoration de boutons
Page 1 sur 1
 Sujets similaires
-
» Décoration de Noel
» Création de boutons avec images et textes dessinés
» Idée (Music est création)
» création d' une image pour tagger
» probleme pour faire un lien avec mes boutons
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens