web-dev-qa-db-fra.com

Comment faire un bouton HTML transparent?

J'utilise dreamweaver pour créer un site Web et j'ai pensé à utiliser simplement Photoshop pour créer des arrière-plans. J'ai décidé de le faire uniquement parce que dans le cas où je choisirais de changer facilement le nom du bouton en modifiant simplement les codes, je pourrais simplement me référer au code. Si je construisais des boutons avec Photoshop, je ne pourrais pas éditer facilement les textes de ces boutons ou de tout élément.

Ma question est donc simple: comment créer un bouton avec un style simple en ligne le rendant transparent, en laissant la valeur du bouton toujours visible.

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

Il laisse toujours une nuance de bordure après votre clic dessus.

htmlcss
91
Shinji

Pour supprimer le contour en cliquant, ajoutez outline:none

Exemple jsFiddle

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}


button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
<button>button</button>

185
j08691

La solution est assez simple en fait:

<button style="border:1px solid black; background-color: transparent;">Test</button>

Cela fait un style en ligne. Vous définissez la bordure comme étant 1 pixel, une ligne continue et une couleur noire. La couleur d'arrière-plan est alors définie sur transparente.

METTRE &AGRAVE; JOUR

On dirait que votre question RÉELLE est comment empêcher la bordure après avoir cliqué dessus. Cela peut être résolu avec un pseudo sélecteur CSS: :active.

button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

JSFiddle Demo

2
EnigmaRM

Créez une div et utilisez votre image (png avec un arrière-plan transparent) comme arrière-plan de la div. Vous pouvez ensuite appliquer le texte de cette div pour le survoler. Quelque chose comme ça:

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

CSS:

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}
2
Gary Hayes

La définition de son image d'arrière-plan sur none fonctionne également:

button {
    background-image: none;
}
0
vivoconunxino
<div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}
0
user3917930