L’un des éléments les plus importants du web, et ce depuis sa création, est l’hyperlien: le lien vers une autre page ou une autre partie de la page.
Il est souvent d’une couleur différente du reste du texte et on peu s’amuser avec le rollover mais je vous propose ici trois techniques (assez connues je l’avoue) de passer la vitesse supérieure avec la balise <a>!

NOTE: Au moment de la création de cet article, les éléments présentés sur cette page sont optimisés pour les navigateurs dans leur version la plus récente tel que Safari 5, Chrome 9, Firefox 4 (bêta), Internet Explorer 9 (bêta), Opera 11, etc.

Certaines fonctionnalités peuvent être limitées aux navigateurs Webkit (Safari et Chrome). Vous voilà prévenus! ;-)

Voir la démo / Télécharger le code source

Fondu enchainé

Un rollover est un moyen basique d’aider à mettre en évidence un lien, mais en utilisant la fonction “transition” on peut adoucir cet effet. On peut aussi définir la durée ou le “type” de transition (fondu enchainé, linéaire, etc.). Vous trouverez une liste détaillée sur The art of web.

Demo:

fondu enchainé au survol

CSS:

a
{
color: #333333;
transition: color .5s ease-in-out; /*standard CSS3*/
-webkit-transition:color .5s ease-in-out; /*pour Webkit (Safari et Chrome)*/
-moz-transition:color .5s ease-in-out; /*pour FireFox*/
-o-transition:color .5s ease-in-out; /*pour Opera*/
}

a:hover
{
color: #999999;
}

Ne pas oublier de spécifier l’effet sur lequel on veut applique la transition, ici: “color”.

Vous remarquerez qu’on a besoin de préfixes spécifiques aux fabricants. Pour la bonne et simple raison que le CSS3 n’est pas encore une norme universelle et que beaucoup de fonctions sont encore considérées comme “en test” même si elles sont parfaitement fonctionnelles aujourd’hui.

Rollover luminescent

Ici on utilise une autre fonction des CSS3: “text-shadow” pour faire apparaitre soit une ombre, soit une lumière autour du lien. Un effet simple mais qui en jette pas mal!

Demo:

lumineux au survol

CSS:
a
{
color: #333333;
}

a:hover
{
color: #333333;
text-shadow: #ffffff 0 0 10px; /*couleur, décalage sur X, décalage sur Y et taille de l'ombre*/
}

Attention tout de même à ne pas en faire trop. Ici ça va pour l’exemple, mais c’est un peu too much. Le site Abduzeedo en fait un très bel usage.

Effet de bouton

Un lien est un bouton, la moindre des choses à faire lorsqu’il est poussé, c’est de le montrer à notre visiteur. Ici on va “enfoncer” le lien lorsqu’il est cliqué (a:active). Assez simple et très efficace, on va simplement faire descendre de 1 pixel le lien lorsqu’il est cliqué.

Demo:

effet de bouton sur le texte (cliquer)

CSS:
a
{
position: relative;
color: #333333;
}

a:hover
{
color: #555555;
}

a:active /*CSS au moment du clic*/
{
top: 1px;
color: #555555;
}

Evidemment cet effet fonctionne aussi avec une image et est d’autant plus efficace sur un bouton et on peut utiliser des dégradés, des images ou tout ce que l’on souhaite pour rendre cet effet plus tangible.

Voilà donc trois moyens très simples et purement CSS de donner un peu de style à ses liens. Et avec les CSS3, on peut arriver à des résultats plus qu’intéressants. A vous d’être créatifs!!

Exemple:

un bouton d’enfer 100% en CSS

Voir la démo / Télécharger le code source