10 effets javascript et CSS pour menus

Vous cherchez quelques petits codes pour animer vos menus et rendre vos liens textes plus funs ?

Dans ce petit article, vous trouverez quelques exemples d’effets sur des liens textuels, utilisant javascript et les CSS.
Les exemples donnez ici peuvent être étendus à tous les styles touchant la typographie.
Passez la souris sur les liens pour voir l’effet. Les petits scripts précedents utilisent les évènements Javascript onmouseover et onmouseout, pour modifier les valeurs des attributs CSS. N’oubliez de remplacer « # » du lien par votre véritable lien, sinon ben ça ne mènera nulle part.

10 effets sur liens :

Lien souligné
Lien surligné
Lien barré
Lien en gras
Lien espacé
Lien majuscule
lien capitales
Lien texte coloré
Lien à fond coloré

Les codes JavaScript - CSS associé :

  • Lien Souligné

    1
    2
    3
    <a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'" href="#">
    Lien souligné
    </a>
  • Lien Surligné

    1
    2
    3
    <a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'overline'" onmouseout="this.style.textDecoration = 'none'" href="#">
    Lien surligné
    </a>
  • Lien Barré

    1
    2
    3
    <a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'line-through'" onmouseout="this.style.textDecoration = 'none'" href="#">
    Lien barré
    </a>
  • Lien en gras

    1
    2
    3
    <a style="font-weight: normal;" onmouseover="this.style.fontWeight = 'bold'" onmouseout="this.style.fontWeight = 'normal'" href="#">
    Lien en gras
    </a>
  • Lien Espacé

    1
    2
    3
    <a style="letter-spacing: 2px;" onmouseover="this.style.letterSpacing ='3px'" onmouseout="this.style.letterSpacing='2px'" href="#">
    Lien espacé
    </a>
  • Lien Majuscule

    1
    2
    3
    <a style="text-transform: none;" onmouseover="this.style.textTransform ='uppercase'" onmouseout="this.style.textTransform='none'" href="#">
    Lien majuscule
    </a>
  • Lien Capitales

    1
    2
    3
    <a style="text-transform: none;" onmouseover="this.style.textTransform ='capitalize'" onmouseout="this.style.textTransform='none'" href="#">
    lien capitales
    </a>
  • Lien à fond colorés

    1
    2
    3
    <a style="color: orange;" onmouseover="this.style.color = 'red'" onmouseout="this.style.color = 'orange'" href="#">
    Lien texte coloré
    </a>
  • Lien à fond colorés

    1
    2
    3
    <a style="color: yellow; background: orange;" onmouseover="this.style.background = 'red'" onmouseout="this.style.background = 'orange'" href="#">
    Lien à fond coloré
    </a>

Maintenant, il ne reste plus qu’à vous amuser et à partager.

A bientôt sur Outils Web

Partager