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

J'ai cette image de bouton:

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

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

En utilisant CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Consultez la documentation de Bootstrap . Une classe .btnexiste et fonctionne avec la abalise, mais vous devez ajouter une .btn-*classe spécifique avec la .btnclasse.

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

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

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.

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>

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

2. Vous pouvez utiliser le hrefslogan à partir de là.

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

Si vous souhaitez éviter de coder en dur une conception spécifique avec css, mais plutôt vous fier au 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.

Aucune des autres réponses ne montre le code où le bouton de lien change d'apparence au 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/

• Utilisez la background-imagepropriété CSS sur la <a>balise
• Définir display:blocket ajuster widthet heighten CSS

Cela devrait faire l'affaire.

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 comme un bloc ( display:block) ou un bloc en ligne ( display:inline-block).

Pour le HTML de base, vous pouvez simplement ajouter une balise img avec le src défini sur l'URL de votre image dans le HREF (A)

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

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

Par exemple:

À l'aide d'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;
}

N'oubliez jamais de masquer 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

Vous avez deux options pour la cohérence.

1. Utilisez des balises spécifiques au framework 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 d'apparence de bouton css ne seront jamais précis.

.

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

return false; est d'empêcher le comportement par défaut du bouton d'être cliqué.

Prenez simplement des conceptions de boutons css ordinaires et appliquez ce CSS à un lien (exactement de la même manière que vous le feriez pour 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>

pour ceux qui rencontrent des problèmes après l'ajout d'actif et de focus, donnez un nom de classe ou d'identifiant à votre bouton et ajoutez-le au css

par exemple

//Code HTML

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

// code css

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

Testé avec Chromium 40 et Firefox 36

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

Essayez ce code:

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

Regardez ceci (il vous expliquera comment le faire) - https://youtu.be/euti4HAJJfk

Un simple comme ça:

<a href="#" class="btn btn-success" role="button">link</a>

Ajoutez simplement "class =" btn btn-success "& role = button