Comment faire pour qu'un lien html ressemble à un bouton?
j'utilise ASP.NET, certains de mes boutons font des redirections. Je préférerais qu'il s'agisse de liens ordinaires, mais je ne veux pas que mes utilisateurs remarquent une grande différence dans l'apparence. J'ai considéré des images enveloppées par des ancres, c.-à-d. des étiquettes, mais je ne veux pas avoir à allumer un éditeur d'image chaque fois que je change le texte sur un bouton.
18 réponses
appliquer cette classe à la classe it
.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>aussi bête que je le pense, je vais poster cette question ancienne.
pourquoi ne pas simplement enrouler une étiquette 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 essayer la réponse acceptée sans le résultat désiré que je cherchais, j'ai essayé le ci-dessus et j'ai obtenu exactement ce que je voulais.
NOTE
cela ne fonctionnera que pour IE9+, Chrome, Safari, Firefox, et probablement Opera.
IMHO, il y a une solution meilleure et plus élégante. Si votre lien est ceci:
<a href="http://www.example.com">Click me!!!</a>
le bouton correspondant doit être le suivant:
<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>
cette approche est plus simple parce qu'elle utilise des éléments html simples, de sorte qu'il fonctionnera dans tous les navigateurs sans rien changer. En outre, 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 les étiquettes <a> comme ceci si vous leur donnez un affichage de bloc. Vous pouvez ajuster la bordure pour donner un effet d'ombre et la couleur de fond pour ce toucher de bouton:)
la propriété CSS3 appearance fournit un moyen simple de style tout élément (y compris une ancre) avec un navigateur intégré <button> styles:
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}<body>
<a class="btn">CSS Button</a>
</body>CSS Tricks a un joli contour avec plus de détails à ce sujet. gardez à l'esprit qu'aucune version D'Internet Explorer ne supporte actuellement ce selon caniuse.com .
si vous voulez un joli bouton avec des coins arrondis, alors 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>comme TStamper l'a dit, Vous pouvez simplement appliquer la classe CSS et la concevoir de cette façon. Comme CSS améliore le nombre de choses que vous pouvez faire avec des liens est devenu extraordinaire, et il ya des groupes de conception maintenant qui se concentrent sur la création de boutons CSS à la recherche étonnante 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. Certains de ces dessins peuvent devenir assez fou, mais il est fournir une alternative fantastique à ce qui aurait pu dans le passé avoir dû être fait avec, disons, flash.
par exemple (ce sont époustouflants à mon avis), http://tympanus.net/Development/CreativeButtons / (il s'agit d'une série d'animations totalement inédites 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 sens, ces boutons ont des effets de transition agréables mais minimalistes, et ils font usage du nouveau style de design "plat".)
vous pouvez créer un bouton standard, puis l'utiliser comme image de fond pour un lien. Ensuite, vous pouvez définir le texte dans le lien sans modifier l'image.
les meilleures solutions si vous n'avez pas un bouton spécial Rendu sont les deux déjà données par TStamper et Ólafur Waage.
cela rentre dans les détails de la css un peu plus aussi, et vous donne quelques images:
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons /
réponse très tardive:
depuis que j'ai commencé à travailler à L'ASP, je lutte avec ça. Voici le meilleur que j'ai trouvé:
Concept: je crée un contrôle personnalisé qui a une étiquette. Puis dans le bouton j'ai mis un événement onclick qui définit le document.emplacement à la valeur désirée avec JavaScript.
j'ai appelé le bouton de contrôle, de sorte que je pourrais 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 système: il ressemble à un contrôle. Vous écrivez une seule étiquette pour elle, < ButtonLink id = "mybutton" navigateurl= "blahblah" / >
le bouton résultant est un bouton HTML" réel " et ressemble donc à un bouton réel. Vous n'avez pas à essayer de simuler l'apparence d'un bouton avec CSS et ensuite lutter avec différents regards sur différents navigateurs.
Alors que les capacités sont limitées, vous pouvez facilement étendre en ajoutant plus de propriétés. Il est probable que la plupart des propriétés auraient juste à "passer à travers" le 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 meilleure, je serais heureux de l'entendre. C'est une douleur, mais il fonctionne.
vous pouvez le faire avec JavaScript:
- Obtenir des styles CSS du bouton réel avec
getComputedStyle(realButton). - 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> utiliser cette classe. Il va faire votre lien regarder le même qu'un bouton lorsqu'il est appliqué en utilisant la classe button sur une étiquette a .
ou
.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 faire cela - j'ai fait un bouton de lien ressembler à un bouton standard, en utilisant L'entrée de TStamper. Le soulignement apparaissait sous le texte quand je planais, cependant, malgré le cadre text-decoration: none .
j'ai pu arrêter le vol stationnaire-soulignement en ajoutant style="text-decoration: none" dans le linkbutton:
<asp:LinkButton
id="btnUpdate"
CssClass="btnStyleTStamper"
style="text-decoration: none"
Text="Update Items"
Onclick="UpdateGrid"
runat="server"
/>
C'est ce que j'ai utilisé. Le 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;
}
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 complètement à côté client et le bouton agit comme un lien vers le targetPage .
ça a marché pour moi. Il ressemble à un bouton et se comporte comme un lien. Vous pouvez le marquer d'un 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>
.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>