Comment faire des liens de bouton pour un site web

Formater le Tag Anchor

• classes CSS créent une grande partie de la magie visuelle que vous voyez sur l`Internet. Choisissez l`attribut CSS droite, et vous pouvez faire quoi que ce soit de mettre une bordure en pointillés autour d`un point d`ajouter une image de fond à un bouton. Commencez la personnalisation de l`un de vos balises d`ancrage en rendant son code HTML ressemble à ceci:

  Visite" rel ="pas de suivi" target ="_blanc"gt; http: //someWebSite.com"-gt; Visite Notre magasin .

  Remplacer http://someWebsite.com avec l`URL du site que vous souhaitez les gens à visiter quand ils cliquent sur le bouton de lien. Changement "Visitez notre boutique" le texte que vous souhaitez que votre lien pour afficher.

Ajouter des attributs CSS

• Créez la classe linkButton que vos références ancrage d`étiquette par coller le code suivant dans la section de style de votre document HTML ou dans une feuille de style externe vos références de documents:

  .linkButton {display: d`îlot text-align: centre- vertical-align: rembourrage intermédiaire: 10px; largeur: 110px; hauteur: 30px; border-style: border-color solide-: couleur bleu-: background-color pourpre: jaune-}

  
  
  
  
  

  Ce code définit le style d`affichage de votre lien pour bloquer, aligne son texte, définit le remplissage autour de votre texte à 10 pixels et ajuste la largeur et la hauteur du bouton. Ces valeurs sont 110 pixels et 20 pixels.

Ajuster attributs CSS valeurs

• Modifiez les valeurs d`attribut dans le linkButton pour obtenir l`effet désiré. Rembourrage se réfère à la quantité d`espace entre le texte du lien et des bords adjacents. Augmentez la valeur pour augmenter le rembourrage et réduire la valeur pour réduire le rembourrage. Les attributs de style frontière et border-color définir le style et la couleur de la bordure du bouton. D`autres valeurs possibles pour border-style comprennent pointillés, tirets et double.

Voir le bouton Lien

• Enregistrez votre document HTML, l`afficher dans un navigateur et vous verrez un bouton avec un fond jaune et texte pourpre. la frontière du bouton est bleu et ses dimensions sont les valeurs que vous définissez pour la hauteur et la largeur. Cliquez sur le bouton et votre navigateur accède à l`URL que vous définissez pour l`attribut href de votre lien.

Apportez sur les effets spéciaux

• Comme des liens réguliers, boutons de liaison peuvent modifier leur apparence lorsque vous interagissez avec eux. CSS pseudo-classes permettent. Ajouter les pseudo-classes suivantes à la section de style de votre document HTML:

  a: visited {background-color: Pink-}
  a: hover {background-color: lightgreen-}

  a: {background-color: orange-} active.

  La pseudo-classe visité change la couleur de fond du bouton de lien vers rose après que quelqu`un visite le lien. Le vol stationnaire pseudo-classe change la couleur de fond sur le bouton de lien vers lightgreen lorsque vous passez votre souris sur le bouton. Enfin, la pseudo-classe visité change la couleur de fond du bouton de lien vers brièvement orange quand un visiteur du site clique sur le bouton. Modifiez les attributs de ces classes au besoin. Par exemple, si vous voulez la largeur du bouton de lien pour passer à 200 pixels et son arrière-plan de couleur pour changer lightgreen sur un événement de vol stationnaire, ajoutez un attribut de largeur à la hover pseudo-classe, comme indiqué ici:

  a: hover {background-color: largeur lightgreen-: 200px;}

Images et Lien Boutons

• Le texte du lien est utile car elle vous permet de savoir où lien vous amène avant de cliquer dessus. Dans cet exemple, les visiteurs du site voient "Visitez notre magasin" que le texte du bouton de lien. Cependant, il est possible d`utiliser une image comme arrière-plan de votre bouton de lien. Cette image apparaîtra derrière le texte normal du bouton. Ajouter une image de fond à votre bouton de lien en collant le code CSS suivant à la fin de votre classe linkButton:

  background: url (IMAGE_URL) -
  background-size: 70px 50px;
  background-repeat: no-repeat;

  Remplacez IMAGE_URL avec l`URL d`une image sur l`Internet ou sur votre serveur Web. Remplacer 70px et 20px avec la largeur et la hauteur que vous souhaitez que votre image soit. Assurez-vous que l`image est assez petit pour tenir à l`intérieur du bouton. Vous pouvez également utiliser un programme d`édition d`image, tels que Microsoft Paint. Paint.Net ou Pixlr.com, pour dessiner une image.

Conseils d`image

• L`attribut background-size redimensionne votre image en fonction des valeurs que vous avez définies pour background-size. Bien que cela fonctionne, votre page Web se charge plus rapidement si vous redimensionnez votre image manuellement à l`aide de votre programme de retouche d`image. Consultez la documentation des applications d`aide si vous avez besoin d`aide à l`apprentissage comment redimensionner une image.