Optimisation moteur


 
 


Vitrines miniatures
Plan du site
Annuaires
Recettes

Aide création site
CSS fe./style
Moteur/rech.
Vidéo comi.
 

HTML button. bouton HTML sans javascript

Exemple 1 CSS

Boutons sans java script

boîte déroulante

Plan du site



Un petit script html/css pour faire vos boutons, sans avoir à utiliser Javascript.
Code à placer entre les balises <head></head> :
<style type="text/css">
a.ret:link { font-family: arial,verdana,sans-serif;
font-size: 11pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: transparent;
}
a.ret:visited { font-family: arial,verdana,sans-serif;
font-size: 11pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: transparent;
}
a.ret:hover { font-family: arial,verdana,sans-serif;
font-size: 10pt;
color: rgb(0, 255, 255);
font-weight: 700;
text-decoration: none;
background-color: transparent;
}
.retour { border-style: double;
border-color: rgb(255, 155, 0) 
rgb(255, 55, 100) rgb(255, 155, 110) 
rgb(155, 55, 100);
border-width: 6px;
background-image: url(html/ima/fd.gif);
background-position: center top;
background-repeat: repeat;
background-color: transparent;
} 


 
 
 
 

Menu vitrines
   Plan du site
Annuaires
Recettes

script modifié:

script modifié:

script modifié:

script modifié:

.ret1 {
border-style: outset ridge;
border-color: rgb(0, 155, 100) rgb(0, 55, 100) rgb(0, 155, 110) rgb(0, 55, 100);
border-width: 4px 6px;
background-image:
url(html/ima/fd3.gif);
background-position: center top;
background-repeat: repeat;
background-color: rgb(255, 255, 255);
color: rgb(255, 250,250);
}
a.s1:link { 
font-family: arial,verdana,sans-serif; 
font-size: 15pt; 
color: rgb(174, 0, 0); 
font-weight: 800; 
text-decoration: none; 
background-color: rgb(50, 130, 120); 
}
a.s1:visited { 
font-family: arial,verdana,sans-serif; 
font-size: 15pt;
color: rgb(174, 0, 0); 
font-weight: 800; 
text-decoration: none; 
background-color: rgb(50, 130, 120);
}
a.s1:hover { 
font-family: arial,verdana,sans-serif; 
font-size: 10pt; 
color: rgb(0, 255, 255); 
font-weight: 700; 
text-decoration: none;
background-color: rgb(174, 0, 0);
}

.ret2 {
border-style: ridge;
border-color: rgb(255, 155, 0) rgb(255, 55, 100) rgb(255, 155, 110) rgb(155, 55, 100);
border-width: 6px;
background-image:
url(html/ima/fddem.gif);
background-position: center top;
background-repeat: repeat;
background-color: rgb(80, 80, 150);
color: rgb(0, 255, 255);
}
a.s2:link {
font-family: arial,verdana,sans-serif;
font-size: 15pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: rgb(150, 150, 10);
}
a.s2:visited {
font-family: arial,verdana,sans-serif;
font-size: 15pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: rgb(150, 140, 150);
}
a.s2:hover {
font-family: arial,verdana,sans-serif;
font-size: 10pt;
color: rgb(0, 255, 255);
font-weight: 700;
text-decoration: none;
background-color: rgb(0, 70, 150);
}

.ret3 {
border-style: groove;
border-color: rgb(255, 155, 0) rgb(255, 55, 100) rgb(255, 155, 110) rgb(155, 55, 100);
border-width: 6px;
background-image: url(html/ima/fddem2.gif);
background-position: center top;
background-repeat: repeat;
background-color: rgb(0, 250, 250);
color: rgb(0, 50, 90);
}
a.s3:link {
font-family: arial,verdana,sans-serif;
font-size: 11pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: rgb(150, 150, 30);
}
a.s3:visited {
font-family: arial,verdana,sans-serif;
font-size: 11pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: rgb(150, 150, 80);
}
a.s3:hover {
font-family: arial,verdana,sans-serif;
font-size: 10pt;
color: rgb(0, 255, 255);
font-weight: 700;
text-decoration: none;
background-color: rgb(80, 150, 150);
}

.ret4 {
border-style: double solid;
border-color: rgb(255, 155, 0) rgb(255, 155, 100) rgb(255, 102, 0) rgb(155, 55, 100);
border-width: 6px;
background-image:
url(html/ima/fddem4.gif);
background-position: center top;
background-repeat: repeat;
background-color: rgb(150, 0, 150);
color: rgb(0, 200, 250);
}
a.s4:link {
font-family: arial,verdana,sans-serif;
font-size: 13pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: rgb(150, 150, 50);
}
< a.s4:visited {
font-family: arial,verdana,sans-serif;
font-size: 13pt;
color: rgb(0, 255, 255);
font-weight: 800;
text-decoration: none;
background-color: rgb(150, 50, 150);
}
a.s4:hover {
font-family: arial,verdana,sans-serif;
font-size: 10pt;
color: rgb(0, 255, 255);
font-weight: 700;
text-decoration: none;
background-color: rgb(50, 150, 150);
}
Bouton n° 1 Bouton n°2 Bouton n° 3 Bouton n° 4



Faites un petit tour sur ces pages, surtout si vous souaitez référencer votre site, quelques conseils pour partir du bon pied ; ce qu'il faut savoir sur les liens internes,  un tutoriel sur The Gimp



Logiciels utilisés pour cette page : NVU, The Gimp, Corel, Pixia.




Si vous avez une ou des recherches à faire, utlisez Google. Pour revenir à cette page utiliser le bouton retour de votre navigateur.

Savez-vous que vous pouvez utiliser google comme calculatrice ? Tapez, par exemple : 11+6, ou même un autre calcul plus complexe. Un dossier sur les astuces de recherches Google et les "trucs" PC sont à votre disposition dans l'espace Faire son site. Vous pouvez vous y rendre depuis le bouton Faire son site en haut à gauche, ou bien directement ICI.

Google

Titre de la page : Boutons HTML CSS

Le site visiograf.org a été réalisé avec le souci de correspondre aux normes du W3C, pour  vérifier la validation HTML 4.01 Transitional copiez l'adresse de la présente page : http://www.visiograf.org/html_boutons.html cliquez ici et collez cette adresse dans le champ Address:, de la rubrique Validate by URL puis cliquez sur Check

pour vérifier la validation CSS 2.1 cliquez ici, et collez de nouveau l'adresse dans le champs Adresse: puis cliquez sur Vérifier

Valid HTML 4.01 Transitional



Creative Commons License         Contact     Haut de page      copyright

Pour utiliser ce script vous devez avoir les bases 
CSS. Voici deux excellents sites pour acquérir ses 
fameuses bases en CSS :
openweb.eu.org/css/
et
Une autre façon de faire avec cette adresse,
mais il n'est pas possible d'insérer
correctement une image [:-(
actuel.fr.selfhtml.org/articles/css/mouseover/

 
 
Code à placer entre les balises <body> et </body> :

<br>
      <a class="ret" href="../index.html"><span
 class="retour">Index Bon bec</span></a>

Remarque :
Le retour à la ligne <br> est obligatoire, sinon
Internet Explorer n'affiche pas la boîte entière.
Vous pouvez modifier le nom des sous classes.
Pensez à changer le nom des dossiers.
Vous pouvez modifier les valeurs à souhaits, [;-)
L'image utilisée :

Image fond de boîte
 

Bouton dynamique HTML CSS

Bouton dynamique HTML CSS