web-dev-qa-db-fra.com

HTML CSS Invisible Button

Bonjour, j'essaie de créer un bouton invisible (toujours fonctionnel et cliquable), car mes styles de boutons sont intégrés à l'arrière-plan et je ne veux pas les couper en tranches, et tout faire à partir du début. 

Donc, je veux juste faire un bouton, le placer sur la partie de l'arrière-plan où le bouton devrait être et le rendre invisible pour que l'image du bouton d'arrière-plan puisse être vue et cliquée. 

Aucune suggestion? Merci beaucoup!

htmlcssbuttoninvisible
14
user1880779

vous devez utiliser les propriétés suivantes pour un élément button pour le rendre transparent.

Bouton transparent sans texte

button {

    background: transparent;
    border: none !important;
    font-size:0;
}

Bouton transparent avec texte visible

button {

    background: transparent;
    border: none !important;
}​

et utilisez une valeur absolue position pour positionner l'élément.

Par exemple

vous avez l'élément de bouton sous un div. Utilisez position: relative on div et position: absolute sur le bouton pour le positionner dans la div.

voici un travail JSFiddle

voici une mise à jour JSFiddle qui affiche uniquement le texte du bouton.

28
Amyth

Vous pouvez utiliser CSS pour masquer le bouton.

button {
  visibility: hidden;
}

Si votre <button> est simplement une zone cliquable sur l'image, pourquoi ne pas en faire un bouton? Vous pouvez utiliser <map> element à la place. 

6
xiaoyi
button {
    background:transparent;
    border:none;
    outline:none;
    display:block;
    height:200px;
    width:200px;
    cursor:pointer;
}

Indiquez la hauteur et la largeur de l'image à l'arrière-plan.Cela supprime les bordures et la couleur d'un bouton.Vous devrez peut-être aussi le positionner de manière absolue pour pouvoir le placer correctement à l'endroit souhaité. code

Pour le rendre vraiment invisible, vous devez définiroutline: none;sinon il y aurait un contour bleu dans certains navigateurs et vous devez définirdisplay: blocksi vous avez besoin de cliquer dessus et d'en définir les dimensions 

6
Mevin Babu

HTML

<input type="button">

CSS

input[type=button]{
 background:transparent;
 border:0;
}
3
Muhammad Usman

Utilisez CSS background:transparent; pour votre bouton/div.

JSFiddle

1
Vucko