Comment faire un bouton HTML transparent?

J’utilise dreamweaver pour créer un site Web et j’ai pensé à utiliser Photoshop pour créer des arrière-plans. J’ai décidé de le faire uniquement parce que si je décidais de changer facilement le nom du bouton en éditant simplement les codes, je pourrais simplement me référer au code. Si je construisais des boutons avec Photoshop, je ne serais pas capable d’éditer les textes de ces boutons ou de n’importe quel élément facilement.

Donc, ma question est simple, comment créer un bouton qui a un style en ligne simple 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 bordure après votre clic.

Pour supprimer le contour en cliquant, ajoutez un outline:none

jsFiddle exemple

 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; } 
  

Créez un div et utilisez votre image (png avec un arrière-plan transparent) comme arrière-plan de la div, puis vous pouvez appliquer n’importe quel texte dans cette div pour survoler le bouton. Quelque chose comme ça:

 
Your Button Label Here

CSS:

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

La solution est assez facile en fait:

  

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


METTRE À JOUR

On dirait que votre question ACTUAL est de savoir 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

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

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

 button { background-image: none; }