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

Question

Je dois faire en sorte qu'un bouton ressemble à un lien à l'aide de CSS. Les modifications sont effectuées mais lorsque je clique dessus, il apparaît comme s'il était enfoncé comme dans un bouton. Avez-vous une idée de la façon d'enlever cela pour que le bouton fonctionne comme un lien même lorsqu'il est cliqué ?

Answer 1

HTML

<button>your button that looks like a link</button>

CSS

button {
    background:none!important;
     border:none; 
     padding:0!important;
    /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

Voir la démo (sur JSfiddle)

Answer 2

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, il faut un peu plus de code :

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

PS : Si vous n'utilisez que des éléments de type bouton, vous pouvez sans risque supprimer les sélecteurs pour les éléments d'entrée et vice versa.

Answer 3

Essayez d'utiliser la pseudoclasse css :focus

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

modifier Pour les liens et les événements onclick, utilisez (vous ne devriez pas utiliser les eventhandlers javascript en ligne, mais pour des raisons 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 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 lorsqu'il est cliqué.

Si le javascript est désactivé, le lien fonctionnera comme un lien normal et ne fera que charger. some/page.php -si vous voulez que votre lien soit mort lorsque js est désactivé, utilisez href="#"

Answer 4

Il n'est pas possible de styliser les boutons comme des liens de manière fiable dans tous les navigateurs. J'ai essayé, mais il y a toujours des problèmes bizarres de padding, de marge ou de police dans certains navigateurs. Il faut soit s'accommoder du fait que le bouton ressemble à un bouton, soit utiliser onClick et preventDefault sur un lien.