Comment créer 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 à l'aide de Photoshop, je ne pourrais pas modifier facilement les textes de ces boutons ou de n'importe quel élément.

Ma question est donc 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 nuance de bordure après avoir cliqué dessus.

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>

La solution est en fait assez simple:

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

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

METTRE À JOUR

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

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

Démo JSFiddle

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

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

CSS:

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

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

Définir son image d'arrière-plan sur aucun fonctionne également:

button {
    background-image: none;
}

** ajoutez l'icône du bouton supérieur comme celui-ci **

#copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
  
}

<button id="copy_btn">

                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>