1. Eklabouton, c'est quoi ?

2. Chargement du script

Le script est ici très petit (moins de 1 ko). Téléchargez le ici: http://ekladata.com/vEMdkrkZrqV1G_MBVbvVXJYSwgQ/eklabouton.js  et enregistrez le parmi les fichiers de votre blog (sous le nom eklabouton.js)

Copiez ensuite le CSS dans Apparence/Modifier le Thème/ Ajouter du css : Fichier CSS

Ensuite, vous le chargez comme ceci:

<script src="url du fichier eklabouton.js"></script>

3. Utilisation - Classe BoutonClassic

On va ici utiliser la classe BoutonClassic pour changer l'apparence du bouton Input.

Vous placez votre balise input comme d'habitude mais en lui donnant une classe (de votre choix) par exemple la classe "monbouton" comme ci-dessous

<input class="monbouton" onclick="alert('Clic sur mon bouton');" type="button" value="Cliquez ici" />

Il ne reste plus qu'à appeler le script comme ceci (avec l'utilisation de cette classe, il n'y a que deux paramètres à indiquer: la classe et la couleur - voir les options):

<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new BoutonClassic ('.monbouton','bleu');
typebouton1.init();
});</script>

On obtiendra donc un bouton bleu comme celui en haut de page.

Si on regroupe tout ça, cela donne:

<script src="url du fichier eklabouton.js"></script>
<input class="monbouton" onclick="alert('Clic sur mon bouton');" type="button" value="Cliquez ici" />
<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new BoutonClassic ('.monbouton','bleu');
typebouton1.init();
});</script>

4. Utilisation - Classe Bouton

Pour l'appel à la classe Bouton, il y a 4 paramètres:

new Bouton (classe, couleur, largeur, hauteur)

Seul le paramètre classe est obligatoire.

Paramètre couleur:  bleu, vert, cyan, orange, rouge et noir.

Si vous omettez la couleur lors de l'appel à la classe Bouton, alors ce seront les couleurs par défaut (comme le bouton gris en haut de page)

Largeur et hauteur: valeurs en pixel

S'ils ne sont pas indiqués, la dimension du bouton sera ajustée automatiquement.

Exemple pour un bouton de 200 pixels de largeur et 50 de hauteur, on écrira:

<script>
onJSFilesLoaded.push(function(){
var typebouton1 = new Bouton ('.monbouton','bleu',200,50);
typebouton1.init();
});</script>

Ajout d'images dans le bouton

Cela se fait au niveau de la balise input avec les propriétés data-ico et data-ico-pos. La hauteur de l'image s'ajuste à la hauteur du bouton. Néanmoins il est souhaitable d'avoir une image de la hauteur du bouton pour un meilleur rendu.

data-ico: url de l'image

data-ico-pos: left ou right (left par défaut)

Exemple:

<input class="bout1" onclick="alert('click bout1');" type="button" value="bouton" data-ico="http://ekladata.com/4hYQcQ_N-C_7GQhAEv1mCKke77Y/2745-88607.png" data-ico-pos="right" />