Créer un bouton cliquable en c.s.s

Voir le sujet précédent Voir le sujet suivant Aller en bas

Créer un bouton cliquable en c.s.s

Icône par defaut le Mar 6 Déc 2011 - 10:29
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
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://le-site-milouze14.bbactif.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



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Re: Créer un bouton cliquable en c.s.s

Icône par defaut le Mar 6 Déc 2011 - 11:00
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
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 .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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