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

Question

J'utilise ASP.NET, certains de mes boutons ne font que des redirections. Je préférerais qu'ils soient des liens ordinaires, mais je ne veux pas que mes utilisateurs remarquent une grande différence dans l'apparence. J'ai pensé à des images enveloppées par des ancres, c'est-à-dire des balises, mais je ne veux pas avoir à lancer un éditeur d'images chaque fois que je change le texte d'un bouton.

Answer 1

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>

Answer 2

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

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

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

Answer 3

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

<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 de simples éléments html, elle fonctionnera donc dans tous les navigateurs sans rien changer. De plus, si vous avez des styles pour vos boutons, cette solution appliquera gratuitement ces mêmes styles à votre nouveau bouton.

Answer 4

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>

Answer 5

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

Vous pouvez jouer avec <a> comme ceci si vous leur donnez un affichage en bloc. Vous pouvez ajuster la bordure pour donner un effet d'ombre et la couleur d'arrière-plan pour donner l'impression d'un bouton :)