Comment faire ressembler un lien html à un bouton?

154

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

css button MatthewMartin
la source
2
Voir la réponse que j'ai acceptée pour cette question: stackoverflow.com/questions/547222/…
tvanfosson
Vous pouvez utiliser un service tel que celui-ci pour générer le CSS pour vous après avoir configuré quelques aspects (couleur, taille, police).
Basil Bourque
1
Je répondrais comment le faire avec javascript mais la question n'a pas de balise "javascript"
ilyaigpetrov
2
@ilyaigpetrov continue et publie une réponse. J'ai posé cette question il y a 7 ans et il semble que ce soit un problème courant et que les gens ont besoin d'une variété de solutions.
MatthewMartin

Réponses:

214

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;
}
<a href="#" class="button">Example</a>
Développer l'extrait

TStamper
la source
13
Le hic, c'est qu'il vous oblige à reproduire l'apparence d'un bouton avec CSS. Mais malheureusement, les boutons sur différents navigateurs et différentes versions de navigateurs sont différents. Vous devez donc soit accepter que cela ait l'air drôle dans certains navigateurs, soit avoir un tas de code pour déterminer quel navigateur et quelle version possède l'utilisateur et choisir un style différent. Ce qui pose beaucoup de problèmes et pourrait se briser la prochaine fois qu'une nouvelle version d'un navigateur sortira.
Jay
Cela ne fonctionne pour moi que si je l'applique à atag directement ( a {display: block ...}), ce qui n'est pas acceptable. Avez-vous une idée de la raison pour laquelle l' classattribut à l'intérieur de la abalise ne fonctionnera pas? :( J'utilise Firefox 27. J'ai aussi essayé a.button {...}et ça ne marche pas non plus.
just_a_girl
1
@Jay, un compromis pourrait être de définir le style des éléments <input type="submit">et / ou de <button>sorte qu'ils n'utilisent pas les paramètres par défaut du navigateur (si possible), puis de les faire correspondre avec le style .buttonci-dessus. Cela devrait aider à réduire les différences, voire à les supprimer complètement, et c'est mieux que votre méthode (peu fiable - comme vous le dites à juste titre) pour renifler le type et la version du navigateur.
Ollie Bennett
@OllieBennett True: Vous pouvez complètement redéfinir l'apparence d'un bouton. Je n'ai pas essayé de faire cela, je ne sais pas combien d'aspects du style vous devez remplacer. Cela ressemble à une douleur, mais sans l'avoir essayé, je ne peux pas dire à quel point c'est douloureux par rapport aux autres options.
Jay
@CraigGjerdingen J'aime beaucoup les styles que vous avez utilisés pour .link_button. L'utilisation de CSS3 met définitivement à jour cette réponse. Utiliser également des styles qui ressemblent moins aux boutons de navigateur "normaux", mais qui ont toujours une capacité de bouton, résout le problème du reniflement du navigateur sans (imo) avoir à redéfinir également les styles pour<input type="submit">
Evan Donovan
128

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

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

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

guanome
la source
8
@Dean_Wilson essaie d'avoir à s'occuper de ie6 :(
Robotnik
@feeel Parce qu'il était plus facile pour moi d'obtenir un bouton cohérent. Si vous utilisez CSS, il n'aura pas de style natif. Quelqu'un d'autre avait déjà cette réponse de toute façon.
guanome le
1
J'aime cette solution, car vous n'avez pas à jouer avec CSS en essayant d'imiter le style de bouton du navigateur natif. Cependant, dans Firefox, je l'ai fait fonctionner uniquement avec <button type="button">. Sans l'attribut type, il ferait toujours une publication et ignorerait le lien.
Tobias
@Pyitoechito Je suis sûr que ce serait le cas puisque Chrome et Safari sont sur le webkit. On dirait que ça va jsfiddle.net/9Gt7y
guanome
31
L'imbrication de <button> et <a> n'est pas du HTML valide et a un comportement indéfini. Voir la réponse détaillée ici stackoverflow.com/questions/6393827/... Si cela fonctionne, ce n'est qu'une coïncidence.
Odin du
36

À mon humble avis, il existe une solution meilleure et plus élégante. Si votre lien est le suivant:

<a href="http://www.example.com">Click me!!!</a>

Le bouton correspondant devrait être le suivant: 

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

Cette approche est plus simple car elle utilise des éléments html simples, elle fonctionnera donc 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.

Raul Luna
la source
5
D'accord, j'ai testé cela aujourd'hui ... et ... cela fonctionne très bien si vous n'utilisez pas de formulaires Web ASP.NET. Les formulaires Web ASP.NET enveloppent la page entière dans une balise de formulaire et les formulaires imbriqués ne semblent pas fonctionner du tout - cela fonctionne en dehors de la balise de formulaire ASP.NET, mais cela limite l'utilisation des liens tout en haut et en bas.
MatthewMartin
3
Simple et efficace. Vous souhaiterez peut-être ajouter un style d'affichage en ligne à l'élément de formulaire. Sinon, il est traité comme un bloc différent de bouton / ancre / entrée.
nimrodm
Bonne question. Je ne pense pas non plus. Mais les autres solutions décrites ici ne fonctionneront pas avec googlebot, par exemple celles consistant à utiliser une balise de bouton.
Raul Luna
J'ai essayé cela dans Django, mais comme le bouton se retrouve dans une autre forme, il POST les données plutôt que d'agir comme un lien.
wobbily_col
1
vous pouvez également faire en sorte que le bouton fasse une redirection en javascript. mais maintenant ce n'est pas un lien - impossible de "copier l'adresse du lien dans le presse-papiers", cliquez du milieu pour l'ouvrir dans un nouvel onglet, etc., prévisualisez la cible du lien en survolant avec la souris, etc.
Alexander Taylor
27

La appearancepropriété CSS3 fournit un moyen simple de styliser n'importe quel élément (y compris une ancre) avec les <button>styles intégrés d'un navigateur :

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
Développer l'extrait

CSS Tricks a un joli contour avec plus de détails à ce sujet. Gardez à l'esprit qu'aucune version d'Internet Explorer ne prend actuellement en charge cela selon caniuse.com .

Kevin Leary
la source
5
Cela a été supprimé de la spécification CSS3. htmlvalidator.com/help.php?m=1&h=appearance
user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Vous pouvez jouer avec des <a>balises comme celle-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 cette sensation de bouton :)

Ólafur Waage
la source
18

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;
}
<a href="#" class="link_button">Example</a>
Développer l'extrait

rupsray
la source
3
J'ai ajouté ceci et la réponse de rang le plus élevé à un jsFiddle. N'hésitez pas à jouer
Craig Gjerdingen
Vous voudrez peut-être y ajouter un marginégalement. Sinon, bon travail de style.
c00000fd
3

Comme l'a dit TStamper, vous pouvez simplement lui appliquer la classe CSS et la concevoir de cette façon. Au fur et à mesure que le CSS améliore le nombre de choses que vous pouvez faire avec des liens, il est devenu extraordinaire, et il existe maintenant des groupes de conception qui se concentrent uniquement sur la création de boutons CSS étonnants pour les thèmes, et ainsi de suite.

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

Par exemple (ceux-ci sont époustouflants à mon avis), http://tympanus.net/Development/CreativeButtons/ (il s'agit d'une série d'animations totalement prêtes à l'emploi pour les boutons, avec le code source sur la page d'origine ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (dans le même esprit, ces boutons ont des effets de transition sympas mais minimalistes, et ils utilisent le nouveau style de conception "plat".)

graemeboy
la source
3

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 strict';

{ // 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.
<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>
Développer l'extrait

ilyaigpetrov
la source
2

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

Les meilleures solutions si vous n'avez pas de bouton rendu spécial sont les deux déjà fournies par TStamper et Ólafur Waage.

cjk
la source
2

Réponse bien tardive:

Je me suis battu avec ça de temps en temps depuis que j'ai commencé à travailler dans ASP. Voici le meilleur que j'ai trouvé:

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

J'ai appelé le contrôle ButtonLink, de sorte que je puisse facilement obtenir si confondu avec LinkButton.

aspx:

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

<asp:Button runat="server" ID="button"/>

code derrière:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        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 String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        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 string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.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 lui écrivez une seule balise, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Le bouton résultant est un "vrai" bouton HTML et ressemble donc à un vrai bouton. Vous n'avez pas besoin d'essayer de simuler l'apparence d'un bouton avec CSS, puis de lutter avec différents regards sur différents navigateurs.

Bien que les capacités soient limitées, vous pouvez facilement l'étendre en ajoutant plus de 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, enabled et cssclass.

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

Geai
la source
2

C'est ce que j'ai utilisé. Le bouton Lien est

<div class="link-button"><a href="/">Example</a></div>

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;
}
Andrew Howden
la source
Cela ne ressemble pas beaucoup à un bouton. Je ne sais pas qui vous a critiqué. Voici le violon JS pour le code que vous avez fourni: jsfiddle.net/yajj2x0p
MatthewMartin
2

Que diriez-vous d'utiliser asp: LinkButton?

Vous pouvez le faire - j'ai fait ressembler un bouton de lien à un bouton standard, en utilisant l'entrée de TStamper. Le soulignement apparaissait sous le texte lorsque je survolais, malgré le text-decoration: noneréglage.

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

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
Christian
la source
Linkbutton crée quelque chose qui ressemble à un lien mais agit comme un bouton. La question demande le contraire: quelque chose qui ressemble à un bouton mais agit comme un lien.
Jay
2

En utilisant les propriétés de bordure, de couleur et de couleur d'arrière-plan, vous pouvez créer un lien HTML ressemblant à un bouton!

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>
Développer l'extrait

J'espère que cela t'aides :]

Sree Ramana
la source
2

Utilisez cette classe . Cela donnera à votre lien le même aspect qu'un bouton lorsqu'il est appliqué à l'aide de la buttonclasse sur une abalise.

ou

VOICI UNE AUTRE DÉMO 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;
}
Muhammad Ashikuzzaman
la source
1

J'utilise un asp:Button:

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

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

Main de Manus
la source
Bon travail montrant à quoi asp:Buttonressemble un dans la pratique, afin qu'il puisse aider d'autres utilisateurs!
Utilisateur qui n'est pas un utilisateur
0 

.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;
}
<a href="#" class="button">Example</a>
Développer l'extrait


la source
0

Utilisez ci-dessous l'extrait.

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
Himadri Mandal
la source
0

Bouton simple css maintenant vous pouvez jouer avec votre éditeur

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

Balise de lien

<a href="#">Hover me<a>
codeuix
la source
-1

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

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
Andrej Adamenko
la source