web-dev-qa-db-fra.com

Comment faire en sorte que le lien <a href=""> ressemble à un bouton?

J'ai cette image de bouton:
enter image description here

Je me demandais s'il serait possible de créer un simple <a href="">some words</a> et le style de ce lien pour qu'il apparaisse comme ce bouton?

Si c'est possible, comment puis-je le faire?

htmlcss
86
GeekedOut

Utilisation de CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

86
Declan Cook

Vérifiez la documentation de Bootstrap . Une classe .btn existe et fonctionne avec la balise a, mais vous devez ajouter une classe .btn-* avec la classe .btn. 

par exemple: <a class="btn btn-info"></a>

90
Gildas Ross

Quelque chose comme ça ressemblerait à un bouton:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

Voir http://jsfiddle.net/r7v5c/1/ pour un exemple.

14
dash

vous pouvez facilement envelopper un bouton avec un lien comme celui-ci <a href="#"> <button>my button </button> </a> 

13
Antagonist

  1. Essaye ça:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Button Tags</h2>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">
</div>

  2. Vous pouvez utiliser la ligne de balise a href à partir de là.

    <a href="URL" class="btn btn-info" role="button">Button Text</a>
8
Sleepy B

Aucune autre réponse ne montre le code où le bouton de lien change d’apparence en survol.

Voici ce que j'ai fait pour résoudre ce problème:

HTML:

<a href="http://www.google.com" class="link_button2">My button</a>

CSS:

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle: https://jsfiddle.net/adamovic/ovu3k0cj/

4
Mladen Adamovic

Si vous souhaitez éviter de coder en dur une conception spécifique avec css, mais utilisez plutôt le bouton par défaut du navigateur, vous pouvez utiliser le css suivant.

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

Notez que cela ne fonctionnera probablement pas sur IE.

4
ISBL
  • Utilisez la propriété CSS background-image sur la balise <a>
  • Définissez display:block et ajustez width et height en CSS

Cela devrait faire l'affaire.

2
dweeves

Pour le code HTML de base, vous pouvez simplement ajouter une balise img avec le code src défini à l’URL de votre image dans le fichier HREF (A).

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>
1
msmucker0527

Vous pouvez créer une classe pour les éléments d'ancrage que vous souhaitez afficher sous forme de boutons.

Par exemple:

Utiliser une image:

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

ou en utilisant une approche CSS pure:

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

Rappelez-vous toujours de cacher le texte avec quelque chose comme:

text-indent: -9999em;

Une excellente galerie de boutons CSS purs est ici .__ et vous pouvez même utiliser le générateur de boutons css3

Beaucoup de styles et de choix sont ici

bonne chance

1
Rdpi

Il suffit de prendre des motifs de boutons réguliers css et d’appliquer ce code CSS à un lien (exactement de la même manière qu’à un bouton).

Exemple:

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>
1
graemeboy

Oui, tu peux faire ça.

Voici un exemple:

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

Bien sûr, vous pouvez modifier l'exemple ci-dessus selon vos besoins. L'important est de le faire apparaître sous forme de bloc (display:block) ou de bloc en ligne (display:inline-block).

1
Oskar

pour ceux qui ont des problèmes après avoir ajouté active et focus, donnez un nom de classe ou d’identifiant à votre bouton et ajoutez-le à css

par exemple

//Code HTML

<button id="aboutus">ABOUT US</button>

// code css

#aboutus{background-color: white;border:none;outline-style: none;}
0
Subham choudhary

Vous avez deux options pour la cohérence.

  1. Utilisez des balises spécifiques à la structure et utilisez-les sur tout le site Web.
  2. Utilisez JavaScript pour émuler un lien sur un élément de bouton, puis faites en sorte que le bouton soit cohérent avec les boutons du navigateur. Ces hacks de type bouton css ne seront jamais précis.

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false; empêche le comportement par défaut du bouton.

0
Ghasan