Comment créer un lien avec l'image de survol en CSS simple

Article écrit par:
  • Conception de site Web
  • Mise à jour: février 27, 2020

* Notes de mise à jour: Cet article a été publié pour la première fois en octobre 2009. Certaines des techniques que j'ai mentionnées sont peut-être dépassées. Veuillez vous référer à ce guide pour la dernière technique de création de site Web.

Qu'est-ce qu'un vol stationnaire? Définition citée dans UWStout.edu:

Le «survol» est un effet qui se produit lorsque vous placez le curseur sur un lien de quelque type que ce soit. Le lien peut être codé pour répondre au survol en changeant de couleur, en affichant un nouveau graphique ou même en jouant un fichier son.

L'effet de survol améliore la convivialité du Web et aide les propriétaires de sites Web à diriger leurs trafics Web. Lorsque vous souhaitez que vos utilisateurs Web accordent une attention particulière à un lien spécial, un bon moyen de le faire est de créer un lien avec un effet de survol attrayant. Un simple effet de survol comme celui-ci (simple soulignement et changement de couleur du texte) indique que ces textes sont «cliquables» et améliore les interactions sur le Web. Cependant, changer la couleur et les styles du texte (soulignement / surlignage / gras) est très basique et il est possible de faire beaucoup plus avec le survol.

Dans cet article, je vais vous montrer comment créer de beaux liens avec effet de survol.

Exemple 1: lien avec le bouton de survol

Tout d’abord, jetez un œil à l’exemple de travail (placez la souris sur le lien pour voir comment cela fonctionne - changement d’icône sur le côté).

Exemple 1 - Lien avec l'image du bouton de survol

Ceci est la version complète de ce qui sera construit dans cet exemple.

Comment nous le créons en CSS simple?

L'image du bouton

Comme vous pouvez le constater, à l’étape 1, nous avons besoin d’une icône de flèche dans deux versions différentes. Dans notre exemple, j'ai utilisé le rouge (#CC3300) comme bouton de liaison par défaut; et gris (#333333) pour l’effet de survol. Ce bouton peut être facilement créé à l’aide de n’importe quel logiciel d’édition d’images

Nous avons maintenant le bouton de couleur rouge (disons, b1.png) et la couleur rey (bouton disons, b2.png). Fusionner ces deux dans un fichier image avec b1.png sur b2.png. Ce sera notre image finale pour le lien. Nommez-le (par exemple, x.png) et chargez l'emplacement souhaité (dans mon cas, je l'ai placé dans mon dossier de modèles WP).

Pour ta culture:

b1.png , b2.png , et x.png

Le code CSS

Ensuite, sur le code CSS. En gros, ce que nous voulons faire est d’indenter légèrement le texte du lien vers la droite pour laisser de la place au bouton; et dans le même temps, affichez une image différente lorsque le lien est en survol. Ce sont des choses assez fondamentales, sauf que nous avons besoin d'un peu de torsion sur la position d'arrière-plan. L'astuce consiste à afficher la partie supérieure de l'image (le bouton rouge) pour le lien d'origine; et en survol, déplacez l’image d’arrière-plan avec une marge -11px (elle peut varier sur votre site Web) pour afficher le bouton gris.

.xa {color: #cc3300; padding-left: 14px; poids de police: gras; background-image: url (images / x.png); position de fond: 0 2px; répétition de fond: non répétée; }
.xa: hover {color: #333333; padding-left: 14px; poids de police: gras; background-image: url (images / x.png); position de fond: 0 -11px; répétition de fond: non répétée; }

Exécution

Pour afficher cet effet de survol, insérez simplement la classe x dans la zone désignée. Voici un exemple sur la façon dont vous pouvez le faire.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> page d'accueil </a> </ p>

Exemple 2: Lien en arrière-plan en survol

Avec le même concept, il existe d'innombrables façons de rendre vos liens sympas. Voici un autre exemple de ce que nous pouvons faire avec les effets de survol avec une méthode légèrement différente. Encore une fois, jetez un coup d'œil sur la version finale.

Exemple 2 - Lien en arrière-plan en survol

Dans cet exemple, je vais créer un lien hypertexte ressemblant à un bouton, où l’arrière-plan changera lorsque les utilisateurs placeront leur souris dessus.

Comment nous le créons en CSS simple?

Les images de fond

Tout d’abord, créez deux images de rectangle arrondi. À des fins de démonstration, nous ne fusionnerons pas ces deux images dans cet exemple. Nous nommerons le rectangle rouge (#CC3300) b1.png; et le rectangle marron (#9F2800) sous le nom b2.png.

Le code CSS

Ensuite, voici les codes de votre feuille de style (nous nommons la classe 'y' dans ce deuxième exemple).

ay {width: 280px; hauteur: 42px; couleur: #000000; remplissage: 10px; texte-décoration: aucun; bloc de visualisation; poids de police: gras; background-image: url (images / b1.png); répétition de fond: non répétée; }
ay: survol {largeur: 280px; hauteur: 42px; couleur: #FFFFFF; remplissage: 10px; poids de police: gras; texte-décoration: aucun; bloc de visualisation; background-image: url (images / b2.png); répétition de fond: non répétée; }

Exécution

Pour afficher le lien, insérez simplement la classe (y) dans la balise <a href> de votre code source. Exemple:

<a href="http://www.webhostingsecretrevealed.com" class="y"> page d'accueil </a>

Emballage en place

J'espère que cet article vous a apporté des informations précieuses et a incité certains d'entre vous à utiliser CSS de manière créative. Si vous pensez que je devrais ajouter quelque chose dans ce guide, n'hésitez pas à laisser vos idées dans la section commentaires.

À propos de Jerry Low

Fondateur de WebHostingSecretRevealed.net (WHSR) - une critique d'hébergement approuvée et utilisée par les utilisateurs de 100,000. Plus de 15 ans d'expérience dans l'hébergement web, le marketing d'affiliation et le référencement. Contributeur à ProBlogger.net, Business.com, SocialMediaToday.com, et plus encore.