Utilisation d'une image comme un bouton soumettre

Si je veux faire mes propres boutons cliquables, je peux le faire:

<a href="javascript:;" class="button">Sign up</a>

Où les règles CSS pour a.button provoque le lien pour être montré comme un bouton. Si j'applique le même truc pour <input type="submit" />, j'ai l'image du bouton, mais il est indiqué sur le dessus de la valeur par défaut bouton "soumettre" et le curseur ne change pas d'un coup de main comme il le fait sur <a> balises.

Comment puis-je résoudre ce problème?

OriginalL'auteur Pieter | 2011-03-12

  1. 6

    Vous pouvez utiliser des propriétés CSS comme

    border: none;
background: transparent;
cursor: pointer;

    pour supprimer les styles par défaut de votre input type="submit" bouton.

    OriginalL'auteur Jon

  2. 14

    Vous pouvez utiliser un input type="image" à la place.

    Elle s'utilise comme ceci:

    <input type="image" src="{your image}" alt="{alternate text}" />
    Je n'ai jamais pensé à la image type. Fait la job!

    OriginalL'auteur kapa

  3. 6
    <button id="bar" type="submit"><img src="foo.img" /></button>

    cela crée un bouton avec une image à l'intérieur.

    et si vous voulez changer le curseur lorsque vous passer la souris sur le curseur utiliser cette feuille de style css.

    button#bar:hover{cursor:pointer}

    OriginalL'auteur Gergely Fehérvári

  4. 4

    Il est assez facile, à utiliser un <input type="submit" />:

    input[type=submit] {
    background: transparent url("path/to/image.jpg") 0 0 no-repeat;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    height: 331px; /* height of the background image */
    width: 500px; /* width of the background image */
    border: 5px solid #fff;
    border-radius: 4em;
}

    JS Fiddle démo.

    OriginalL'auteur David Thomas