Comment faire des boutons ressemblent à un lien?

Le code de la accepté de répondre à des œuvres pour la plupart des cas, mais pour obtenir un bouton qui se comporte vraiment comme un lien que vous avez besoin d'un peu plus de code. Il est particulièrement difficile d'obtenir le style de boutons à droite sur Firefox (Mozilla).

Le code CSS suivant assure que les ancres et les boutons ont les mêmes propriétés CSS et de se comporter de la même manière sur tous les navigateurs les plus courants:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

L'exemple ci-dessus ne modifie button éléments pour améliorer la lisibilité, mais il peut être facilement étendu à modifier input[type="button"], input[type="submit"] et input[type="reset"] éléments. Vous pouvez également utiliser une classe, si vous voulez faire uniquement certains boutons ressemblent à des ancres.

Voir cette JSFiddle pour un live de la démo.

Veuillez également noter qu'il s'agit de la valeur par défaut d'ancre, le style des boutons (en bleu, par exemple de texte en couleur). Donc, si vous voulez changer la couleur du texte ou quoi que ce soit d'autre d'ancres, & boutons, vous devriez faire ce après le CSS ci-dessus.

---

Le code d'origine (voir l'extrait) dans cette réponse était complètement différent et incomplète.

CSS:

/* Obsolete code! Please use the code of the updated answer. */

input[type="button"], input[type="button"]:focus, input[type="button"]:active,  
button, button:focus, button:active {
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	font: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	color: blue;
	cursor: pointer;
	text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
    border: none;
    padding: 0;
}

essayez d'utiliser le css pseudoclass :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

modifier comme pour les liens et les événements onclick utiliser (vous ne devriez pas utiliser le javascript en ligne gestionnaires d'événements, mais par souci de simplicité, je vais les utiliser ici):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

avec cette.href vous pouvez même accéder à la cible du lien dans votre fonction. return false va juste empêcher les navigateurs en suivant le lien quand on clique dessus.

si javascript est désactivé le lien va fonctionner comme un lien normal et il suffit de charger some/page.php—si vous voulez que votre lien soit morts quand js est désactivé href="#"

Vous pouvez atteindre cet objectif en utilisant de simples css comme indiqué dans l'exemple ci-dessous

CSS:

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}

HTML:

<button type="submit" class="link"><span>Button as Link</span></button>