¿Cómo hacer un botón HTML transparente?

Estoy usando Dreamweaver para crear un sitio web y pensé en usar Photoshop para crear fondos. Decidí hacerlo solo porque en caso de que optara por cambiar el nombre del botón fácilmente simplemente editando los códigos, podría referirme al código. Si construyera botones usando Photoshop, no podría editar los Textos en esos botones o en cualquier elemento fácilmente.

Entonces, mi pregunta es simple, ¿cómo creo un botón que tiene un estilo en línea simple que lo hace transparente y deja el valor del botón aún visible?

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

Todavía deja un tono de borde después de hacer clic en él.

Para deshacerse del contorno al hacer clic, agregue outline:none

ejemplo de 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 solución es bastante fácil en realidad:

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

Esto está haciendo un estilo en línea. Está definiendo que el borde sea de 1 px, línea sólida y color negro. Luego, el color de fondo se establece en transparente.

ACTUALIZAR

Parece que su pregunta REAL es cómo evitar el borde después de hacer clic en él. Que se pueden resolver con un selector de pseudo CSS: :active.

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

Demostración de JSFiddle

Haga un div y use su imagen (png con fondo transparente) como fondo del div, luego puede aplicar cualquier texto dentro de ese div para colocar el cursor sobre el botón. Algo como esto:

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

Establecer su imagen de fondo en ninguno también funciona:

button {
    background-image: none;
}

** agregue el botón superior del ícono como este **

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