Come fare in modo che il <a href=”> link abbia l'aspetto di un pulsante?

Ho questa immagine del pulsante:

Mi chiedevo se sarebbe stato possibile fare in modo che un <a href="">some words</a>collegamento semplice e di stile appaia come quel pulsante?

Se è possibile, come posso farlo?

Utilizzando CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Controlla i documenti di Bootstrap . Una classe .btnesiste e funziona con il atag, ma è necessario aggiungere una .btn-*classe specifica con la .btnclasse.

per esempio: <a class="btn btn-info"></a>

puoi facilmente avvolgere un pulsante con un link in questo modo <a href="#"> <button>my button </button> </a>

Qualcosa del genere assomiglierebbe a un pulsante:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

Vedi http://jsfiddle.net/r7v5c/1/ per un esempio.

1. Prova questo:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
   <div class="container">
     <h2>Button Tags</h2>
     <a href="#" class="btn btn-info" role="button">Link Button</a>
     <button type="button" class="btn btn-info">Button</button>
     <input type="button" class="btn btn-info" value="Input Button">
     <input type="submit" class="btn btn-info" value="Submit Button">
   </div>

   Esegui snippet di codiceNascondi risultati

   Espandi lo snippet

2. Puoi usare la hreftag line da lì.

   <a href="URL" class="btn btn-info" role="button">Button Text</a>

Se desideri evitare l'hard-coding di un design specifico con css, ma piuttosto fare affidamento sul pulsante predefinito del browser, puoi utilizzare il seguente css.

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

Si noti che probabilmente non funzionerà su IE.

Nessuna delle altre risposte mostra il codice in cui il pulsante di collegamento cambia aspetto al passaggio del mouse.

Questo è quello che ho fatto per risolverlo:

HTML:

<a href="http://www.google.com" class="link_button2">My button</a>

CSS:

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  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: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/

• Utilizza la background-imageproprietà CSS sul <a>tag
• Imposta display:blocke regola widthe heightin CSS

Questo dovrebbe fare il trucco.

Si, puoi farlo.

Ecco un esempio:

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

Ovviamente puoi modificare l'esempio sopra in base alle tue necessità. L'importante è farlo apparire come block ( display:block) o inline block ( display:inline-block).

Per l'HTML di base, puoi semplicemente aggiungere un tag img con src impostato sull'URL dell'immagine all'interno dell'HREF (A)

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

Puoi creare una classe per gli elementi di ancoraggio che desideri visualizzare come pulsanti.

Per esempio:

Utilizzando un'immagine:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

o utilizzando un approccio CSS puro:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Ricorda sempre di nascondere il testo con qualcosa come:

text-indent: -9999em;

Un'eccellente galleria di pulsanti CSS puri è qui e puoi persino utilizzare il generatore di pulsanti CSS3

Un sacco di stili e scelte sono qui

in bocca al lupo

Hai due opzioni per la coerenza.

1. Usa tag specifici del framework e usali in tutto il sito web.
2. Utilizza JavaScript per emulare un collegamento su un elemento pulsante, quindi fai in modo che il pulsante sia coerente con l'aspetto dei pulsanti del browser. Quegli hack con l'aspetto dei pulsanti CSS non saranno mai accurati.

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; è impedire il comportamento predefinito del pulsante su cui si fa clic.

Prendi i normali design dei pulsanti CSS e applica quel CSS a un link (esattamente nello stesso modo in cui faresti per un pulsante).

Esempio:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

per coloro che hanno problemi dopo l'aggiunta di active e focus, dai un nome di classe o id al tuo pulsante e aggiungilo a css

per esempio

// codice html

<button id="aboutus">ABOUT US</button>

// codice css

#aboutus{background-color: white;border:none;outline-style: none;}

Testato con Chromium 40 e Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

Prova questo codice:

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

Guarda questo (spiegherà come farlo) - https://youtu.be/euti4HAJJfk

Un semplice come quello:

<a href="#" class="btn btn-success" role="button">link</a>

Aggiungi semplicemente "class =" btn btn-success "e ruolo = pulsante