Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Habiller les boutons avec le DHTML  






C'est beau un bouton !!!
Celui qui suit est particulier :



Son code aussi :

<input type="button" value="J'apprends tous les jours"
style ="FONT-WEIGHT: bold;
BORDER-LEFT-COLOR: #5f9f9f;
BORDER-BOTTOM-COLOR: #5f9f9f;
COLOR: #ffffff;
BORDER-TOP-STYLE: outset;
BORDER-TOP-COLOR: #5f9f9f;
BORDER-RIGHT-STYLE: outset;
BORDER-LEFT-STYLE: outset;
BACKGROUND-COLOR: #5f9f9f;
BORDER-RIGHT-COLOR: #5f9f9f;
BORDER-BOTTOM-STYLE: outset;">


Celui-ci est en couleur, son texte aussi, et quand vous cliquez dessus, tout change !!!


Le code aussi est beau :

<input type="button" value="Un bouton caméléon" style="background:red;color:yellow;" onclick="this.style.color='white';this.style.background='gray'">

On peut aussi carrément créer un bouton qui change de texte lors du clic utilisateur :

** Le bouton doit ici être impérativement placé dans un <form>
Le code du bouton :

<form name="mimi><input type="button" name="mon_bouton" value="Votez ici" onclick="chang_text()"></form>

** Il fait appel au code Javascript suivant :

<script>
function chang_text(){
document.mimi.mon_bouton.value="Merci d'avoir voté !"
}
</script>

Un bouton qui prévient l'internaute lors du survol :

** Le bouton est encadré dans un <form> ** Même s'il permet toujours le clic, c'est "onmouseover qui est appelé :

<input type="button" name="mi_bouton" value="Entrez" onmouseover="demontr(0)" onmouseout="demontr(1)">

** Le script appelé :

function demontr(bubu){
var chacha=new Array("Attention, zone protégée","Entrez")
document.mama.mi_bouton.value=chacha[bubu]
}

Voici une image :


et la même image en background d'un bouton :



Le code de ce bouton est le suivant :

<input type="button" value="Mon bouton à moi"
style="background-image:url(votre_image.jpg)">

Pour en finir et éviter un urticaire :o) sachez que l'on peut à loisir mêler et entremêler ces différentes actions sur un même bouton...