Créer un bouton clignotant

17.09.2015

Il est possible de créer un bouton clignotant, soit dans un des modules du menu, soit au niveau de l'un des articles.

Et voici le code à ajouter dans la source html du module ou de l'article pour un exemple de bouton spécialement créé pour développer ce petit guide :

L'exemple de bouton

Le code

Pour créer un bouton clignotant dans un des modules du menu :

Ouvrir le module via le bouton Éditer (petit crayon).
Cliquer sur le bouton Code source sur la fenêtre d'édition du module.
Écrire ce code dans la source html du module :

Le code

Pour créer un bouton clignotant au niveau d'un des articles :

Ouvrir l'article via le bouton Éditer, ou via le bouton Écrire un nouvel article si il s'agit de la composition d'un tout nouvel article.
Cliquer sur le bouton Code source sur la fenêtre d'édition.
Écrire ce code dans la source html de l'article :

Le code

L'Apparence du bouton clignotant

Pour les besoins de ce petit guide, j'ai créé une apparence au bouton qui sert d'exemple.

Le code qui lui offre cette apparence est celui qui est situé dans la balise <div>...... </div>.

Dans cette balise, il y a la couleur du bouton et du texte qu'il l'accompagne, il y a des bordures pour le bouton et un aspect de celles-ci, ainsi qu'une ombre apportée à l'ensemble de l'apparence du bouton. Toutes ces valeurs sont modifiables.

Pour adapter ce bouton clignotant à votre site ou votre blog, il suffira alors de modifier les codes couleurs, et ajuster les dimensions en px pour chaque éléments et pour la largeur du bouton si vous le souhaitez soit en apparence bouton ou soit en apparence barre clignotante.

L'animation de clignotement est également gérable, il suffit de modifier la vitesse du clignotement au niveau du code javascript, et cette valeur est signifiée par cette ligne de code sur l'exemple de bouton pour ce petit guide :

setInterval("blink(bl)",1000);

Voici des exemples que ce code peut afficher :

La suite : Créer un bouton clignotant avec déclencher du clic >