Comment faire ressembler un bouton à un lien?

287

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?

James Hibbard
la source
4
les événements onclick sur les liens sont aussi simples que sur les boutons
knittl
2
@knittl, @cletus En fait, les liens et les boutons ont des significations très différentes en HTML. Vous devriez lire whatwg.org/specs/web-apps/current-work/multipage/… . Ce n'est peut-être pas une bonne idée de styliser le bouton pour qu'il ressemble à un lien, mais cela dépend de la conception de l'interface utilisateur, alors que l'utilisation du lien est contraire aux spécifications HTML.
Anton Strogonoff
5
Il y a plusieurs raisons pour lesquelles il peut être nécessaire de styliser un bouton comme un lien. (1) le bouton a le type = "soumettre" (2) le bouton a un style sophistiqué, c'est-à-dire une image d'arrière-plan de longueur variable
TJ.
95
Il peut également être plus sémantiquement correct que quelque chose soit un bouton, même si vous voulez qu'il ressemble à un lien. Par exemple, imaginez une paire de liens "Développer tout | Réduire tout" qui changent quelque chose sur la page. Cliquer dessus provoque une action, mais ne mène l'utilisateur nulle part - la sémantique est celle d'un bouton. Cependant, le concepteur peut avoir des liens spécifiés pour des raisons d'apparence. C'est donc en fait une très bonne question.
shacker
17
J'utilise un bouton au lieu d'un lien car en déclenchant des méthodes JS avec un lien, je suis obligé de créer un lien pour #ensuite l'utiliser event.preventDefault(). C'est méchant, tout comme le lien avec javascript:void(0);.
Archonic

Réponses:

351

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>

adardesign
la source
24
Ma très légère variation sur le violon - déplacé le texte-décoration: souligner la règle pour agir sur le bouton: survoler. voir dans mon violon fourchu .
odedbd
10
Si vous ne voulez pas tous les boutons portant le titre sous forme de liens, la portée du style avec quelque chose comme button.link {...styles...}alors <button class="link">Your button</button>. Cela évite également d'utiliser !importantce qui est toujours une bonne idée.
Archonic
3
N'oubliez pas d'en prendre soin outline. Certains navigateurs lui ajoutent des boutons. Vous pouvez vous mettre outline-color: transparent.
SiliconMind
4
Veuillez ne pas supprimer le contour car cela rendrait votre bouton inaccessible: outlinenone.com
Dominik
4
Au lieu d' border-bottomutilisation text-decoration:underline.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
86

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.

Torben
la source
Pourquoi avez-vous besoin outline-offset: 0;si le contour est défini sur aucun?
Mohamad
J'ai dû ajouter box-shadow: nonepour effacer tout le style sur le bouton
Tobbe
Un autre:text-transform: none;
Shone Tow
75

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!

BoJack Horseman
la source
7
Cela a très bien fonctionné mais a laissé un peu de remplissage par opposition à un vrai lien <a>. Ajoutez simplement un style de rembourrage: 0! Important et c'est doré. Merci!
David
Cela semble déclencher une validation de formulaire avec jquery validate
Paul Becker
Ce n'est pas une solution fiable. Non seulement il rompt subtilement le centrage vertical, mais il désactive implicitement le style du texte et les changements de taille de police.
Radon Rosborough
5

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="#"

knittl
la source
Je l'utiliserais mais je ne suis pas très sûr des changements à appliquer pour que le bouton ne soit pas indenté.
Ouais. N même après avoir donné la paddina à 0, l'indentation reste toujours
4

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.

Jacob Rask
la source
2
C'était vrai lorsque les navigateurs utilisaient des widgets natifs. Est-ce toujours vrai pour les navigateurs récents, même à distance?
aij
1
Nous sommes en 2017 et mon FireFox utilise toujours des widgets natifs.
Michael Scheper
2

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>

entrez la description de l'image ici

GSB
la source