Come faccio a rendere un collegamento HTML simile a un pulsante?

154

Sto usando ASP.NET, alcuni dei miei pulsanti fanno solo reindirizzamenti. Preferirei che fossero collegamenti ordinari, ma non voglio che i miei utenti notino molta differenza nell'aspetto. Ho considerato le immagini avvolte da ancore, ovvero i tag, ma non voglio dover avviare un editor di immagini ogni volta che cambio il testo su un pulsante.

css  button 
— MatthewMartin
fonte
2
Vedere la risposta ho accettato per questa domanda: stackoverflow.com/questions/547222/...
— tvanfosson
Puoi utilizzare un servizio come questo per generare il CSS per te dopo aver configurato alcuni aspetti (colore, dimensione, carattere).
— Basil Bourque,
1
Vorrei rispondere come farlo con javascript ma la domanda non ha tag "javascript"
— ilyaigpetrov
2
@ilyaigpetrov vai avanti e pubblica una risposta. Ho chiesto questo Q 7 anni fa e sembra che sia un problema comune e che le persone abbiano avuto bisogno di una varietà di soluzioni.
— Matthew Martedì

Risposte:

214

Applica questa classe ad essa

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

— TStamper
fonte
13
Il problema è che è necessario riprodurre l'aspetto di un pulsante con CSS. Ma sfortunatamente i pulsanti su diversi browser e diverse versioni di browser sembrano diversi. Quindi devi accettarlo in modo divertente in alcuni browser o avere un sacco di codice per capire quale browser e quale versione ha l'utente e scegliere uno stile diverso. Il che è un sacco di problemi e potrebbe rompersi la prossima volta che esce una nuova versione di un browser.
— Jay,
Questo funziona solo per me se lo applico al atag direttamente ( a {display: block ...}), il che non è accettabile. Hai idea del perché l' classattributo all'interno del atag non funzionerà? :( Sto usando Firefox 27. Ho anche provato a.button {...}e non funziona neanche.
— just_a_girl
1
@Jay un compromesso potrebbe essere quello di definire lo stile degli elementi <input type="submit">e / o in <button>modo che non usino le impostazioni predefinite del browser (dove possibile), e quindi abbinarli allo stile .buttoncome sopra. Ciò dovrebbe aiutare a ridurre le differenze, se non rimuoverle completamente, ed è migliore del tuo metodo (inaffidabile - come giustamente dici) di sniffare il tipo e la versione del browser.
— Ollie Bennett,
@OllieBennett True: potresti ridefinire completamente l'aspetto di un pulsante. Non ho provato a farlo, non sono sicuro di quanti aspetti dello stile devi ignorare. Sembra un dolore, ma non averlo provato, non posso dire quanto dolore sia rispetto ad altre opzioni.
— Jay,
@CraigGjerdingen Mi piacciono molto gli stili che hai usato per .link_button. L'uso di CSS3 aggiorna sicuramente questa risposta. Anche l'uso di stili che sono meno simili ai pulsanti "normali" del browser, ma che hanno comunque un prezzo accessibile, risolve il problema dell'annusamento del browser senza (imo) ridefinire gli stili per<input type="submit">
— Evan Donovan,
128

Perché non semplicemente avvolgere un tag di ancoraggio attorno a un elemento pulsante.

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

Funzionerà con IE9 +, Chrome, Safari, Firefox e probabilmente Opera.

— guanome
fonte
8
@Dean_Wilson prova a provvedere a ie6 :(
— Robotnik il
@feeel Perché è stato più facile per me ottenere un pulsante dall'aspetto coerente. Se usi CSS, non avrà uno stile nativo. Qualcun altro aveva già avuto quella risposta.
— guanome,
1
Mi piace questa soluzione, dato che non devi armeggiare con i CSS cercando di imitare lo stile dei pulsanti del browser nativo. Tuttavia, in Firefox ho funzionato solo con <button type="button">. Senza l'attributo type farebbe sempre un postback e ignorerebbe il collegamento.
— Tobias,
@Pyitoechito Sono sicuro che sarebbe perché Chrome e Safari sono su webkit. Sembra che sarà jsfiddle.net/9Gt7y
— guanome il
31
L'annidamento di <button> e <a> non è un codice HTML valido e presenta un comportamento indefinito. Vedi la risposta dettagliata qui stackoverflow.com/questions/6393827/… Se funziona, è solo una coincidenza.
— Odino,
36

IMHO, esiste una soluzione migliore ed elegante. Se il tuo link è questo:

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

Il pulsante corrispondente dovrebbe essere questo: 

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

Questo approccio è più semplice perché utilizza semplici elementi html, quindi funzionerà in tutti i browser senza cambiare nulla. Inoltre, se hai stili per i tuoi pulsanti, questa soluzione applicherà gli stessi stili gratuitamente al tuo nuovo pulsante.

— Raul Luna
fonte
5
Ok, l'ho provato oggi .. e .. funziona benissimo se non stai usando i moduli web ASP.NET. I webform ASP.NET racchiudono l'intera pagina in un tag del modulo e i moduli nidificati non sembrano funzionare affatto, ma funzionano al di fuori del tag del modulo ASP.NET, ma ciò limita l'uso dei collegamenti in alto e in basso.
— Matthew Martedì
3
Semplice ed efficace Potresti voler aggiungere display: inline style all'elemento form. Altrimenti viene trattato come un blocco diverso dal pulsante / ancora / input.
— nimrodm,
Buona domanda. Neanche io la penso così. Ma altre soluzioni illustrate qui non funzioneranno con googlebot, ad esempio quelle dell'utilizzo di un tag pulsante.
— Raul Luna,
Ho provato questo in Django, ma quando il pulsante finisce in un'altra forma, POST i dati piuttosto che fungere da collegamento.
— wobbily_col
1
potresti anche fare in modo che il pulsante esegua un reindirizzamento in JavaScript. ma ora non è un collegamento - impossibile "copiare l'indirizzo del collegamento negli appunti", fare clic con il tasto centrale per aprire in una nuova scheda, ecc., visualizzare l'anteprima del collegamento del mouse passandoci sopra con il mouse ecc.
— Alexander Taylor,
27

La appearanceproprietà CSS3 fornisce un modo semplice per modellare qualsiasi elemento (incluso un ancoraggio) con gli <button>stili incorporati di un browser :

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

Trucchi CSS ha un bel contorno con maggiori dettagli su questo. Tieni presente che attualmente nessuna versione di Internet Explorer supporta questa funzionalità secondo caniuse.com .

— Kevin Leary
fonte
5
È stato eliminato dalle specifiche CSS3. htmlvalidator.com/help.php?m=1&h=appearance
— user1431356
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Puoi giocare con <a>tag come questo se dai loro una visualizzazione a blocchi. Puoi regolare il bordo per dare un effetto simile all'ombra e il colore di sfondo di quel pulsante :)

— Ólafur Waage
fonte
18

Se vuoi un bel pulsante con gli angoli arrotondati, usa questa 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>
Espandi frammento

— rupsray
fonte
3
Ho aggiunto questa e la risposta più alta a un jsFiddle. Sentiti libero di scherzare
— Craig Gjerdingen
Potresti voler aggiungere marginanche a. Altrimenti, buon lavoro lo styling.
— c00000fd,
3

Come diceva TStamper, puoi semplicemente applicare la classe CSS e progettarla in quel modo. Mentre il CSS migliora il numero di cose che puoi fare con i link è diventato straordinario, e ora ci sono gruppi di progettazione che si concentrano solo sulla creazione di pulsanti CSS dall'aspetto sorprendente per i temi, e così via.

Ad esempio, puoi eseguire le transizioni con il colore di sfondo usando la proprietà -webkit-transizione e le classi pseduo. Alcuni di questi progetti possono diventare abbastanza ricchi di contenuti, ma stanno fornendo una fantastica alternativa a ciò che in passato avrebbe potuto essere stato fatto con, diciamo, flash.

Ad esempio (secondo me sono strabilianti), http://tympanus.net/Development/CreativeButtons/ (questa è una serie di animazioni totalmente pronte all'uso per i pulsanti, con codice sorgente nella pagina di origine ). http://www.commentredirect.com/make-awesome-flat-buttons-css/ (sulla stessa linea, questi pulsanti hanno effetti di transizione gradevoli ma minimalisti e fanno uso del nuovo stile di design "piatto").

— graemeboy
fonte
3

Puoi farlo con JavaScript:

  1. Ottieni stili CSS di pulsante reale con getComputedStyle(realButton).
  2. Applica gli stili a tutti i tuoi collegamenti.

/* 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>
Espandi frammento

— ilyaigpetrov
fonte
2

È possibile creare un pulsante standard, quindi utilizzarlo come immagine di sfondo per un collegamento. Quindi è possibile impostare il testo nel collegamento senza modificare l'immagine.

Le soluzioni migliori se non si dispone di un pulsante di rendering speciale sono le due già fornite da TStamper e Ólafur Waage.

— CJK
fonte
2

Risposta molto tardiva:

Ho lottato con questo acceso e spento da quando ho iniziato a lavorare in ASP. Ecco il meglio che ho ideato:

Concetto: creo un controllo personalizzato che ha un tag. Quindi nel pulsante inserisco un evento onclick che imposta document.location sul valore desiderato con JavaScript.

Ho chiamato il controllo ButtonLink, in modo da poter essere facilmente confuso con LinkButton.

aspx:

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

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

codice dietro:

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

Vantaggi di questo schema: sembra un controllo. Scrivi un singolo tag per questo, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

Il pulsante risultante è un pulsante HTML "reale" e quindi sembra proprio un pulsante reale. Non devi provare a simulare l'aspetto di un pulsante con CSS e quindi lottare con look diversi su browser diversi.

Mentre le abilità sono limitate, puoi facilmente estenderlo aggiungendo più proprietà. È probabile che la maggior parte delle proprietà debba semplicemente "passare" al pulsante sottostante, come ho fatto per il testo, abilitato e cssclass.

Se qualcuno ha una soluzione più semplice, più pulita o comunque migliore, sarei felice di ascoltarla. Questo è un dolore, ma funziona.

— ghiandaia
fonte
2

Questo è quello che ho usato. Il pulsante di collegamento è

<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
fonte
Tuttavia, non assomiglia molto a un pulsante. Non so chi ti abbia votato per il downgrade. Ecco il violino JS per il codice che hai fornito: jsfiddle.net/yajj2x0p
— MatthewMartin
2

Che ne dici di usare asp: LinkButton?

Puoi farlo: ho fatto apparire un pulsante di collegamento come un pulsante standard, usando la voce di TStamper. La sottolineatura è stata mostrata sotto il testo quando, tuttavia, ho sospeso, nonostante l' text-decoration: noneimpostazione.

Sono stato in grado di fermare la sottolineatura al passaggio del mouse aggiungendo style="text-decoration: none"all'interno del pulsante di collegamento:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
— cristiano
fonte
Linkbutton crea qualcosa che assomiglia a un link ma si comporta come un pulsante. La domanda chiede il contrario: qualcosa che assomiglia a un pulsante ma si comporta come un collegamento.
— Jay,
2

Usando il bordo, il colore e le proprietà del colore di sfondo puoi creare un link HTML simile a un pulsante!

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>
Espandi frammento

Spero che questo ti aiuti :]

— Sree Ramana
fonte
2

Usa questa classe . Farà apparire il tuo link lo stesso di un pulsante quando applicato usando la buttonclasse su un atag.

o

ECCO UN ALTRO 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;
}
— Muhammad Ashikuzzaman
fonte
1

Io uso un asp:Button:

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

In questo modo, il funzionamento del pulsante è completamente lato client e il pulsante si comporta come un collegamento al targetPage.

— Manus Hand
fonte
Un buon lavoro che asp:Buttonmostra come appare in pratica, quindi può aiutare gli altri utenti!
— Utente che non è un utente il
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>
Espandi frammento

0

Usa lo snippet di seguito.

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

Semplice pulsante css ora puoi giocare con il tuo editor

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

Tag link

<a href="#">Hover me<a>
— codeuix
fonte
-1

Questo ha funzionato per me. Sembra un pulsante e si comporta come un collegamento. Puoi aggiungere un segnalibro per esempio.

<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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.