Comment faire ressembler un bouton à un lien?

Je dois faire ressembler un bouton à un lien en utilisant CSS. Les changements sont faits mais quand je clique dessus, ça se voit comme poussé comme dans un bouton. Une idée de la façon de supprimer cela, afin que le bouton fonctionne comme un lien même lorsque vous cliquez dessus?

Le code de la réponse acceptée fonctionne dans la plupart des cas, mais pour obtenir un bouton qui se comporte vraiment comme un lien, vous avez besoin d'un peu plus de code. Il est particulièrement difficile d'obtenir le style des boutons ciblés directement sur Firefox (Mozilla).

Le CSS suivant garantit que les ancres et les boutons ont les mêmes propriétés CSS et se comportent de la même manière sur tous les navigateurs 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 modifie uniquement les buttonéléments pour améliorer la lisibilité, mais il peut facilement être étendu pour modifier input[type="button"], input[type="submit"]et les input[type="reset"]éléments également. Vous pouvez également utiliser une classe, si vous souhaitez que seuls certains boutons ressemblent à des ancres.

Voir ce JSFiddle pour une démo en direct.

Veuillez également noter que cela applique le style d'ancrage par défaut aux boutons (par exemple, la couleur du texte bleu). Donc, si vous souhaitez modifier la couleur du texte ou toute autre chose des ancres et des boutons, vous devez le faire après le CSS ci-dessus.

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

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

Si cela ne vous dérange pas d'utiliser twitter bootstrap, je vous suggère simplement d'utiliser la classe de lien .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

J'espère que cela aide quelqu'un :) Bonne journée!

essayez d'utiliser la pseudoclasse css :focus

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

éditez comme pour les liens et l'utilisation des événements onclick (vous ne devriez pas utiliser les gestionnaires d'événements en ligne javascript, mais pour des raisons de simplicité, je les utiliserai ici):

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

avec this.href, vous pouvez même accéder à la cible du lien dans votre fonction. return falseempêchera simplement les navigateurs de suivre le lien lorsque vous cliquez dessus.

si javascript est désactivé, le lien fonctionnera comme un lien normal et se chargera simplement some/page.php- si vous voulez que votre lien soit mort lorsque js est désactivé, utilisezhref="#"

Vous ne pouvez pas styliser les boutons comme des liens fiables dans tous les navigateurs. Je l'ai essayé, mais il y a toujours des problèmes étranges de remplissage, de marge ou de police dans certains navigateurs. Soit vivre en laissant le bouton ressembler à un bouton, soit utiliser onClick et preventDefault sur un lien.

Vous pouvez y parvenir en utilisant un simple CSS comme indiqué dans l'exemple ci-dessous

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

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