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?
287
#
ensuite l'utiliserevent.preventDefault()
. C'est méchant, tout comme le lien avecjavascript:void(0);
.Réponses:
la source
button.link {...styles...}
alors<button class="link">Your button</button>
. Cela évite également d'utiliser!important
ce qui est toujours une bonne idée.outline
. Certains navigateurs lui ajoutent des boutons. Vous pouvez vous mettreoutline-color: transparent
.border-bottom
utilisationtext-decoration:underline
.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:
L'exemple ci-dessus modifie uniquement les
button
éléments pour améliorer la lisibilité, mais il peut facilement être étendu pour modifierinput[type="button"], input[type="submit"]
et lesinput[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.
Afficher l'extrait de code
la source
outline-offset: 0;
si le contour est défini sur aucun?box-shadow: none
pour effacer tout le style sur le boutontext-transform: none;
Si cela ne vous dérange pas d'utiliser twitter bootstrap, je vous suggère simplement d'utiliser la classe de lien .
J'espère que cela aide quelqu'un :) Bonne journée!
la source
essayez d'utiliser la pseudoclasse css
:focus
é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):
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 se chargera simplement
some/page.php
- si vous voulez que votre lien soit mort lorsque js est désactivé, utilisezhref="#"
la source
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.
la source
Vous pouvez y parvenir en utilisant un simple CSS comme indiqué dans l'exemple ci-dessous
la source