Comment créer un lien HTML?

J’utilise ASP.NET, certains de mes boutons font juste des redirections. Je préfère qu’ils soient des liens ordinaires, mais je ne veux pas que mes utilisateurs remarquent beaucoup de différence dans l’apparence. J’ai considéré les images enveloppées par des ancres, c’est-à-dire des balises, mais je ne veux pas avoir à lancer un éditeur d’images chaque fois que je change le texte d’un bouton.

Appliquez-lui cette classe

.button { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; } 
 Example 

Aussi stupide que je pense, je vais poster cette ancienne question.

Pourquoi ne pas simplement enrouler une balise d’ancrage autour d’un élément de bouton.

  

Après avoir lu ce post et essayé la réponse acceptée sans le résultat souhaité, je cherchais ce que je voulais.

REMARQUE

Cela ne fonctionnera que pour IE9 +, Chrome, Safari, Firefox et probablement Opera.

IMHO, il existe une solution meilleure et plus élégante. Si votre lien est le suivant:

 Click me!!! 

Le bouton correspondant doit être celui-ci:

 

Cette approche est plus simple car elle utilise des éléments HTML simples, de sorte que cela fonctionnera dans tous les navigateurs sans rien changer. De plus, si vous avez des styles pour vos boutons, cette solution appliquera les mêmes styles à votre nouveau bouton gratuitement.

 a { display: block; height: 20px; width: auto; border: 1px solid #000; } 

Vous pouvez jouer avec des balises comme celles-ci si vous leur donnez un affichage en bloc. Vous pouvez ajuster la bordure pour donner un effet de nuance et la couleur d’arrière-plan pour ce bouton 🙂

La propriété d’ appearance CSS3 offre un moyen simple de styliser n’importe quel élément (y compris une ancre) avec les styles intégrés à un navigateur:

 a.btn { -webkit-appearance: button; -moz-appearance: button; appearance: button; } 
  CSS Button  

Si vous voulez un joli bouton avec des coins arrondis, utilisez cette classe:

 .link_button { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); background: #4479BA; color: #FFF; padding: 8px 12px; text-decoration: none; } 
 Example 

Comme l’a dit TStamper, vous pouvez simplement appliquer la classe CSS et la concevoir de cette manière. Comme CSS améliore le nombre de choses que vous pouvez faire avec les liens, il est devenu extraordinaire, et il existe maintenant des groupes de conception qui se concentrent sur la création de boutons CSS incroyables pour les thèmes, etc.

Par exemple, vous pouvez effectuer des transitions avec background-color en utilisant la propriété -webkit-transition et les classes pseduo. Certaines de ces conceptions peuvent être assez grossières, mais elles offrent une alternative fantastique à ce qui aurait pu être fait par le passé avec, disons, le flash.

Par exemple (ce qui est hallucinant à mon avis), http://tympanus.net/Development/CreativeButtons/ (il s’agit d’une série d’animations totalement originales pour les boutons, avec le code source sur la page d’origine). ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (dans la même veine, ces boutons ont des effets de transition agréables mais minimalistes, et ils utilisent le nouveau style de design “plat”.)

Vous pouvez créer un bouton standard, puis l’utiliser comme image d’arrière-plan pour un lien. Ensuite, vous pouvez définir le texte dans le lien sans modifier l’image.

Les meilleures solutions si vous ne disposez pas d’un bouton de rendu spécial sont les deux déjà fournies par TStamper et Ólafur Waage.

Cela rentre un peu plus dans les détails du CSS, et vous donne quelques images:

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

Réponse tardive:

Je me suis débattu avec ça depuis que j’ai commencé à travailler en ASP. Voici le meilleur que j’ai inventé:

Concept: Je crée un contrôle personnalisé avec une balise. Ensuite, dans le bouton, je mets un événement onclick qui définit document.location sur la valeur souhaitée avec JavaScript.

J’ai appelé le contrôle ButtonLink, afin que je puisse facilement obtenir si confondu avec LinkButton.

aspx:

 < %@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>  

code derrière:

 Partial Class controls_ButtonLink Inherits System.Web.UI.UserControl Dim _url As Ssortingng Dim _confirm As Ssortingng Public Property NavigateUrl As Ssortingng Get Return _url End Get Set(value As Ssortingng) _url = value BuildJs() End Set End Property Public Property confirm As Ssortingng Get Return _confirm End Get Set(value As Ssortingng) _confirm = value BuildJs() End Set End Property Public Property Text As Ssortingng Get Return button.Text End Get Set(value As Ssortingng) button.Text = value End Set End Property Public Property enabled As Boolean Get Return button.Enabled End Get Set(value As Boolean) button.Enabled = value End Set End Property Public Property CssClass As Ssortingng Get Return button.CssClass End Get Set(value As Ssortingng) button.CssClass = value End Set End Property Sub BuildJs() ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick ssortingng twice. ' But it's not that big a deal. If Ssortingng.IsNullOrEmpty(_url) Then button.OnClientClick = Nothing ElseIf Ssortingng.IsNullOrEmpty(_confirm) Then button.OnClientClick = Ssortingng.Format("document.location='{0}';return false;", ResolveClientUrl(_url)) Else button.OnClientClick = Ssortingng.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url)) End If End Sub End Class 

Avantages de ce schéma: Il ressemble à un contrôle. Vous écrivez un tag unique,

Le bouton résultant est un “vrai” bouton HTML et ressemble donc à un vrai bouton. Vous n’avez pas à essayer de simuler l’apparence d’un bouton avec CSS et à lutter avec différents aspects sur différents navigateurs.

Bien que les capacités soient limitées, vous pouvez facilement les étendre en ajoutant d’autres propriétés. Il est probable que la plupart des propriétés devraient simplement “passer” au bouton sous-jacent, comme je l’ai fait pour le texte, activé et cssclass.

Si quelqu’un a une solution plus simple, plus propre ou autrement meilleure, je serais heureux de l’entendre. C’est une douleur, mais ça marche.

Vous pouvez le faire avec JavaScript:

  1. Obtenez des styles CSS de bouton réel avec getComputedStyle(realButton) .
  2. Appliquez les styles à tous vos liens.
 /* javascript, after body is loaded */ 'use ssortingct'; { // Namespace starts (to avoid polluting root namespace). const btnCssText = window.getComputedStyle( document.querySelector('.used-for-btn-css-class') ).cssText; document.querySelectorAll('.btn').forEach( (btn) => { const _d = btn.style.display; // Hidden buttons should stay hidden. btn.style.cssText = btnCssText; btn.style.display = _d; } ); } // Namespace ends. 
  

Button Styled Links

first second

Utilisez cette classe. Cela rendra votre lien identique à un bouton lorsqu’il sera appliqué en utilisant la classe de button sur une balise.

VOICI LA DEMO JFIDDLE

ou

VOICI UN AUTRE DEMO JSFIDDLE

 .button { display: inline-block; outline: none; cursor: pointer; border: solid 1px #da7c0c; background: #478dad; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .3em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .button:active { position: relative; top: 1px; } 

Que diriez-vous d’utiliser ASP: LinkButton?

Vous pouvez le faire – j’ai fait un bouton de lien ressembler à un bouton standard, en utilisant l’entrée de TStamper. Sous le texte, le soulignement était visible lorsque je flottais malgré la text-decoration: none du text-decoration: none réglage.

J’ai pu arrêter le soulignement en ajoutant le style="text-decoration: none" dans le bouton de lien:

  

C’est ce que j’ai utilisé. Le bouton de lien est

  

CSS

 /* body is sans-serif */ .link-button { margin-top:15px; max-width:90px; background-color:#eee; border-color:#888888; color:#333; display:inline-block; vertical-align:middle; text-align:center; text-decoration:none; align-items:flex-start; cursor:default; -webkit-appearence: push-button; border-style: solid; border-width: 1px; border-radius: 5px; font-size: 1em; font-family: inherit; border-color: #000; padding-left: 5px; padding-right: 5px; width: 100%; min-height: 30px; } .link-button a { margin-top:4px; display:inline-block; text-decoration:none; color:#333; } .link-button:hover { background-color:#888; } .link-button:active { background-color:#333; } .link-button:hover a, .link-button:active a { color:#fff; } 

J’utilise un asp:Button :

  

De cette façon, le fonctionnement du bouton est entièrement côté client et le bouton agit comme un lien vers la targetPage .

Cela a fonctionné pour moi. Il ressemble à un bouton et se comporte comme un lien. Vous pouvez y mettre un signet par exemple.

    
 .button { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC; } 
 Example 

Que diriez-vous d’utiliser ASP: LinkButton ?