Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 6 Déc 2011 - 10:29
coucou ,
aujourd'hui, nous allons créer un bouton simple avec l'aide une feuille de style hinhin .

Le code vierge html:
Code:

<div class="LA CLASS DU BOUTON">
    <div><a href="LE LIEN">LE TITRE</a></div>
</div>
Exemple
Pour le même bouton que celui-ci:

Son code html:
Code:

<div class="boutongoogle">
    <div><a href="http://www.google.fr/">Google</a></div>
</div>

J'ai nommé la class "boutongoogle" afin de mieux me repérer sur d'éventuels autres tite bêtes de ce genre moqueur .

Bon, c'est pas tout mais on va passer à la feuille de style hinhin .

Dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

On va donner notre souhait d'apparence au contenant soit la class "boutongoogle"

Code:
.boutongoogle
{
background:#141414 ;/*la couleur de fond (modifiez à votre convenance)*/
color: #00a5cd;/*la couleur de police (modifiez à votre convenance)*/
width:100px; /*la largeur du bouton  (modifiez à votre convenance)*/
height:35px; /*la hauteur du bouton  (modifiez à votre convenance)*/
 border:1px solid #00a5cd; /*la couleur et l'épaisseur de la bordure (modifiez à votre convenance)*/
 -moz-border-radius-topleft: 10px;/* bordures arrondies de 10px pour tous les navigateurs à jour*/
  -moz-border-radius-topright:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
 -moz-border-radius-bottomleft:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    -moz-border-radius-bottomright:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    -webkit-border-top-left-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    -webkit-border-top-right-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    -webkit-border-bottom-left-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    -webkit-border-bottom-right-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    border-top-left-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    border-top-right-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    border-bottom-left-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
    border-bottom-right-radius:10px; /* bordures arrondies de 10px pour tous les navigateurs à jour*/
 text-align:center; /*le texte centrer  */
}


Voilà le bouton est créé hinhin .

Mais un petit effet de survol est bien agréable à l’œil clin oeil .


Ajoutez à la class :hover afin d'avoir l'effet escompté clin oeil
Code:
.boutongoogle:hover
{
 background:#333333 ;/*la couleur de fond (modifiez à votre convenance)*/
border:1px solid #e29e01;/*la couleur et l'épaisseur de la bordure (modifiez à votre convenance)*/



Passons maintenant au contenu ( le lien ):

Je n'ai pas déposer de couleur de fond volontairement car le rendu n'est pas terrible clin oeil .

Code:
.boutongoogle div 
{
 font:12px bold italic TrebuchetMS;/*la taille en px et le format de police (modifiez à votre convenance)*/
 color: #e29e01; /*la couleur de police  (modifiez à votre convenance)*/
 cursor:pointer; /*un curseur pour démontrer un lien (modifiez à votre convenance)*/
margin-top:-10px; /*La marge négative pour centrer le lien(modifiez à votre convenance en diminuant ou augmentant la valeur )*/
}

idée bon allez c'est toujours pénible d'appliquer une couleur de lien personnalisée
sur les forumactif alors je vais vous donner la combine mais schut moqueur .

Allez voir ce tuto :
http://www.milouze14.com/t20563-changer-la-couleur-des-liens-dans-les-topics


Ensuite on va mettre un style à notre lien,
vous vous rappelez ?
Non oups ?

Bon allez je vous le redonne :

Code:

<div class="bouton">
<div><a href="http://www.google.fr/">Google</a></div>
</div>

On va appliquer une class au lien en ajoutant ceci:
class="votre class de couleur">

Pour ma part j'ai définie ma couleur préférée en "mycolor" hinhin dans ma feuille de style hinhin .
Pensez bien à déposer l'attribut "a"devant clin oeil .
Dans ta feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style


Donc ma class sera:

Code:

a.mycolor{color:#00a5cd;text-decoration: none !important;}
a.mycolor:hover{color:#e29e01;text-decoration: none !important;}

Modifiez la couleur et si vous désirez laisser le soulignement du lien ainsi qu'au survol,
il faudra supprimer: text-décoration:none;

Maintenant je vais appliquer la class à mon lien hinhin :
Code:
class="mycolor"

Comme ceci:

Code:

<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>

Ce qui donnera avec le survol du lien une couleur différente hinhin




super voilà c'est tout pour le moment clin oeil .



Dernière édition par Milouze14 le Jeu 8 Déc 2011 - 8:16, édité 1 fois





Fondateur des forums Milouze14

- Contact par MP -



Milouze14


Fondateur

Milouze14

Message posté: le Mar 6 Déc 2011 - 11:00
coucou c'est encore moi moqueur ,

si vous désirez déposer vos boutons dans une barre de navigation,
il faudra créer un tableau:

Le résultat avec le même bouton sur 5 colonnes hinhin .


















L'ouverture de votre tableau commence toujours par
Code:
<table>
puis on créé une ligne
Code:
<tr>
Puis une colonne
Code:
<td>
ensuite on insère notre code :
Code:
<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>
puis on ferme notre colonne
Code:
</td>
on ferme la ligne
Code:
</tr>
Puis on ferme le tableau
Code:
</table>
Créez autant de colonnes que vous souhaitez mais tout en respectant la largeur de la page
ou sera inséré le tableau pour éviter toute déformation hinhin

Un copier coller devrait suffire clin oeil .
Spoiler:

Code:

<table><tr>
<td>
<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>
</td>
<td>
<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>
</td>
<td>
<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>
</td>
<td>
<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>
</td>
<td>
<div class="boutongoogle">
    <div><a href="http://www.google.fr/"class="mycolor">Google</a></div>
</div>
</td>
</tr>
</table>

super voilà, c'est tout pour le moment clin oeil .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

  
  • © PunBB | Signaler un abus