web-dev-qa-db-fra.com

Faire un <bouton> qui est un lien en HTML

En gros, j'aime bien le style de <input type="submit">, avec le bouton cliquable lorsque vous ajoutez un peu de CSS. Cependant, les boutons normaux ne sont pas stylés en tant que tels, ils ne peuvent pas être cliqués sans certains CSS ou JS majeurs, et vous devez utiliser des images.

J'ai créé les boutons de soumission en liens, en utilisant l'action formulaire, mais cela me demande de créer un nouveau formulaire pour chaque bouton. Comment puis-je trouver un juste milieu? L'utilisation de plusieurs formulaires pose des problèmes de style que je n'arrive pas à résoudre, à moins de trouver un autre moyen de créer des boutons sous forme de liens au format HTML, dont le style par défaut leur donne un état pressé (et je ne veux pas dire paramètres par défaut du navigateur). 

Des idées?

htmlcssbutton
19
AKor
<a href="#"><button>Link Text</button></a>

Vous avez demandé un lien qui ressemble à un bouton, utilisez donc un lien et un bouton :-) Cela préservera le style des boutons du navigateur par défaut. Le bouton en lui-même ne fait rien, mais cliquer dessus active son lien parent.

Démo: 

<a href="http://stackoverflow.com"><button>Link Text</button></a>

32
edeverett

Vous avez trois options:

  • Les liens de style doivent ressembler à des boutons utilisant CSS.

    Il suffit de regarder les "balises" bleu clair sous votre question.

    Il est possible, même de leur donner une apparence déprimée lorsque vous cliquez dessus (en utilisant des pseudo-classes comme: active), sans aucun script. De nombreux sites majeurs, tels que Google, commencent de toute façon à créer des boutons à partir de styles CSS, qu'ils utilisent un script ou non.

  • Placez un élément <form> distinct autour de chacun d'eux.

    Comme vous l'avez mentionné dans la question. Facile et fonctionnera certainement sans Javascript (ni même CSS). Mais cela ajoute un peu de code supplémentaire qui peut paraître désordonné.

  • Comptez sur Javascript.

    C'est ce que vous avez dit que vous ne vouliez pas faire.

3
thomasrutter

Utilisez javascript:

<button onclick="window.location.href='/css_page.html'">CSS page</button>

Vous pouvez toujours styler le bouton en css à tout moment. J'espère que ça a aidé!

Bonne chance!

1
Freeranger

Un peu plus facile et cela ressemble exactement au bouton dans le formulaire. Utilisez simplement l'entrée et enroulez la balise d'ancrage autour d'elle.

<a href="#"><input type="button" value="Button Text"></a>
0
Jared

IMPORTANT:<button> ne devrait jamais être un descendant de <a>.

Essayez <a href="http://stackoverflow.com"><button>Link Text</button></a> dans n'importe quel validateur HTML tel que https://validator.w3.org et vous obtiendrez une erreur. Utiliser un bouton ne sert à rien si vous utilisez pas le bouton. Dénommez simplement le <a> avec css pour qu’il ressemble à un bouton. Si vous utilisez un framework tel que Bootstrap, vous pouvez appliquer les styles de bouton btn, btn-primary etc.

jsfiddle: bouton stylé lien

.btnStack {
  font-family: Oswald;
  background-color: orange;
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

a.btnStack:hover {
  background-color: #000;
}
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>

0
joby-flick