Come creare un pulsante HTML trasparente?

Sto usando Dreamweaver per creare un sito web e ho pensato di usare Photoshop solo per creare sfondi. Ho deciso di farlo solo perché nel caso avessi scelto di cambiare facilmente il nome del pulsante semplicemente modificando i codici, potevo semplicemente fare riferimento al codice. Se dovessi costruire pulsanti usando Photoshop, non sarei in grado di modificare facilmente i testi in quei pulsanti o in qualsiasi elemento.

Quindi la mia domanda è semplice, come faccio a creare un pulsante che abbia uno stile in linea semplice che lo rende trasparente lasciando il valore del pulsante ancora visibile.

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

Lascia ancora un'ombra del bordo dopo averlo cliccato.

Per eliminare il contorno quando si fa clic, aggiungere outline:none

jsFiddle esempio

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 soluzione è piuttosto semplice in realtà:

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

Questo sta facendo uno stile in linea. Stai definendo il bordo come 1px, linea continua e di colore nero. Il colore di sfondo viene quindi impostato su trasparente.

AGGIORNARE

Sembra che la tua domanda EFFETTIVA sia come previeni il confine dopo aver fatto clic su di esso. Che possono essere risolti con un selettore pseudo CSS: :active.

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

JSFiddle Demo

Crea un div e usa la tua immagine (png con sfondo trasparente) come sfondo del div, quindi puoi applicare qualsiasi testo all'interno di quel div per passare con il mouse sul pulsante. Qualcosa come questo:

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

L'impostazione della sua immagine di sfondo su nessuno funziona anche:

button {
    background-image: none;
}

** aggiungi l'icona del pulsante in alto in questo modo **

#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>