Como fazer um botão HTML transparente?

Estou a usar o dreamweaver para criar um site e pensei em usar o Photoshop para criar fundos. Eu decidi fazê-lo apenas porque no caso de eu escolher mudar o nome do botão facilmente apenas editando os códigos, eu poderia apenas se referir ao código. Se eu construísse botões usando Photoshop, eu não seria capaz de editar os textos nesses botões ou em qualquer elemento facilmente.

Então a minha pergunta é simples, como é que eu crio um botão que tem um estilo simples em linha tornando-o transparente, deixando o valor do botão ainda visível.

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}
Ainda deixa uma sombra de fronteira depois de clicar nele.

 82
htmlcss
Author: Leon Gaban, 2014-03-27
Source

5 answers

Para se livrar do contorno ao carregar, adicione outline:none

Exemplo 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>
 167
Author: j08691, 2016-08-12 20:49:51

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

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

CSS: 

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}
 2
Author: Gary Hayes, 2014-03-26 20:39:23

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

<button style="border:1px solid black; background-color: transparent;">Test</button>
Isto está a fazer um estilo inline. Estás a definir a fronteira para ser 1px, linha sólida, e preto a cores. A cor de fundo é então configurada como transparente.

Actualizar

Parece que a sua pergunta é como prevenir a fronteira depois de clicar nela. Isso pode ser resolvido com um pseudo selector CSS: :active. 
button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

Demonstração Do JSFiddle

 1
Author: EnigmaRM, 2014-03-26 20:41:00 
<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;    
}
 0
Author: user3917930, 2014-08-07 10:33:08

Definir a sua imagem de fundo para ninguém também funciona: 

button {
    background-image: none;
}
 0
Author: vivoconunxino, 2017-09-19 10:28:29