Como fazer um botão HTML transparente?

Estou usando o dreamweaver para criar um site e pensei em usar apenas o Photoshop para criar fundos. Decidi fazer isso apenas porque, no caso de optar por alterar o nome do botão facilmente apenas editando os códigos, poderia apenas referir-me ao código. Se eu fosse construir botões usando Photoshop, não seria capaz de editar os Textos nesses botões ou em qualquer elemento facilmente.

Portanto, minha pergunta é simples, como faço para criar um botão que tem um estilo embutido simples, tornando-o transparente e deixando o valor do botão ainda visível.

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

Ele ainda deixa uma sombra de borda após você clicar nele.

Para eliminar o contorno ao clicar, adicione outline:none

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

A solução é muito fácil, na verdade:

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

Este é um estilo embutido. Você está definindo a borda como sendo 1px, linha sólida e preta. A cor de fundo é então definida como transparente.

ATUALIZAR

Parece que sua pergunta REAL é como você evita a borda após clicar nela. Isso pode ser resolvido com um seletor pseudo CSS: :active.

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

JSFiddle Demo

Faça um div e use sua imagem (png com fundo transparente) como fundo do div, então você pode aplicar qualquer texto dentro desse div para passar o mouse sobre o botão. Algo assim:

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

Definir sua imagem de plano de fundo como nenhuma também funciona:

button {
    background-image: none;
}

** adicione o botão superior do ícone 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>