web-dev-qa-db-fra.com

Comment faire en sorte qu'un lien html ressemble à un bouton?

J'utilise ASP.NET, certains de mes boutons ne font que des redirections. Je préférerais que ce soient des liens ordinaires, mais je ne veux pas que mes utilisateurs remarquent une grande différence d'apparence. J’ai considéré les images entourées d’ancres, c’est-à-dire les tags, mais je ne veux pas avoir à lancer un éditeur d’image chaque fois que je change le texte d’un bouton.

cssbutton
132
MatthewMartin

Appliquez cette classe à elle

.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>

189
TStamper

Aussi bête que je pense, je vais poser cette question ancienne.

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

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

Après avoir lu ce post et essayé la réponse acceptée sans obtenir le résultat souhaité, j'ai essayé ce qui précède et obtenu exactement ce que je voulais.

REMARQUE

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

115
guanome

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

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

Le bouton correspondant devrait être ceci: 

<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, 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 gratuitement les mêmes styles à votre nouveau bouton. 

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

Vous pouvez jouer avec les tags <a> comme celui-ci si vous leur donnez un affichage en bloc. Vous pouvez ajuster la bordure pour donner une teinte comme un effet et la couleur d’arrière-plan pour que le bouton s’agisse :)

20
Ólafur Waage

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

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>

CSS Tricks a un beau contour avec plus de détails à ce sujet. N'oubliez pas qu'aucune version d'Internet Explorer ne prend actuellement en charge cette fonctionnalité selon caniuse.com .

19
Kevin Leary

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>

15
rupsray

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

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

Par exemple (à mon avis, cela décoiffe), 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 le même esprit, ces boutons ont des effets de transition agréables mais minimalistes et utilisent le nouveau style de design "plat".)

3
graemeboy

Réponse très tardive:

Je lutte avec cela de temps en temps depuis que j'ai commencé à travailler pour ASP. Voici le meilleur que j'ai créé avec:

Concept: je crée un contrôle personnalisé qui a 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" %>

<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: Cela ressemble à un contrôle. Vous écrivez une seule balise pour cela, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Le bouton obtenu 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, puis à vous débattre avec différents apparences 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 devront simplement "passer" au bouton sous-jacent, comme je l'ai fait pour text, enabled et cssclass.

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

2
Jay

Vous pouvez le faire avec JavaScript:

  1. Obtenez les styles CSS du 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>

2
TheNamelessOne

Utilisez cette classe. Votre lien ressemblera à un bouton lorsqu'il est appliqué à l'aide de la classe button sur une balise a.

ICI IS THE DEMO JSFIDDLE

ou 

ICI IS 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;
}
2
Muhammad Ashikuzzaman

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 changer l'image.

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

2
cjk

Cela entre un peu plus dans les détails du fichier css et vous donne quelques images:

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

2
GBa

Pourquoi ne pas utiliser asp: LinkButton? 

Vous pouvez le faire - j'ai fait ressembler un bouton bouton à un bouton standard, en utilisant l'entrée de TStamper. Le soulignement est apparu sous le texte lorsque j'ai survolé, malgré le réglage text-decoration: none. 

J'ai réussi à arrêter le survol survol en ajoutant style="text-decoration: none" dans le lien:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
2
Christian

C'est ce que j'ai utilisé. Bouton de 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;
}
1
Andrew Howden

En utilisant les propriétés de bordure, couleur et couleur de fond, 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>

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

1
Sree Ramana

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 bouton fonctionne du côté du client et agit comme un lien vers la variable targetPage.

1
Manus Hand

Simple bouton 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;
}

Lien tag

<a href="#">Hover me<a>
0
internthings

Utilisez l'extrait ci-dessous.

    .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);
    }
  }
}
0
Himadri Mandal

.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>

0
user5625080

Cela a fonctionné pour moi. Il ressemble à un bouton et se comporte comme un lien. Vous pouvez le marquer, 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>
0
Andrej Adamenko