web-dev-qa-db-fra.com

Comment faire en sorte que le bouton ressemble à un lien?

J'ai besoin de faire un bouton ressembler à un lien en utilisant CSS. Les modifications sont terminées, mais lorsque je clique dessus, cela s’affiche comme s’il était poussé comme dans un bouton. Avez-vous une idée de la façon de supprimer cela afin que le bouton fonctionne comme un lien même lorsque vous cliquez dessus?

cssbuttonhyperlink
252
Pooja Jain
button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<button> your button that looks like a link</button>
308
adardesign

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).

Les CSS suivantes garantissent 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 ne modifie que les éléments button pour améliorer la lisibilité, mais il peut facilement être étendu pour modifier également les éléments input[type="button"], input[type="submit"] et input[type="reset"]. Vous pouvez également utiliser une classe si vous souhaitez que seuls certains boutons ressemblent à des ancres.

Voir ce JSFiddle pour une démonstration en direct.

Notez également que cela applique le style d'ancrage par défaut aux boutons (par exemple, la couleur de texte bleue). Donc, si vous voulez changer la couleur du texte ou n'importe quoi d'autre d'ancres et de boutons, vous devriez le faire après le CSS ci-dessus.

Le code d'origine (voir l'extrait) de 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;
}
84
Torben

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

<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 :) Passez une bonne journée!

68
BoJack Horseman

essayez d’utiliser la pseudo-classe css :focus

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

edit pour l’utilisation des liens et des événements onclick (vous ne devez pas utiliser les gestionnaires d’événements javascript en ligne, mais par souci 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 false empê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 chargera simplement some/page.php— si vous souhaitez que votre lien soit mort lorsque js est utilisation désactivée href="#"

5
knittl

Vous ne pouvez pas attribuer de style aux boutons en tant que liens de manière fiable dans les navigateurs. Je l'ai essayé, mais il existe toujours des problèmes étranges de remplissage, de marge ou de police dans certains navigateurs. Soit en direct en laissant le bouton ressembler à un bouton, soit en utilisant onClick et preventDefault sur un lien.

4
Jacob R

Vous pouvez y parvenir en utilisant un simple css comme le montre 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>

enter image description here

2
GSB