Jak zrobić przezroczysty przycisk HTML?

Używam Dreamweaver do stworzenia strony internetowej i pomyślałem o użyciu Photoshopa do tworzenia tła. Zdecydowałem się na to tylko dlatego, że w przypadku, gdybym wybrał łatwą zmianę nazwy przycisku, po prostu edytując kody, mogłem po prostu odwołać się do kodu. Gdybym skonstruował przyciski w Photoshopie, nie byłbym w stanie łatwo edytować tekstów w tych przyciskach lub w jakimkolwiek elemencie.

Moje pytanie jest więc proste: jak utworzyć przycisk, który ma prosty styl wbudowany, dzięki czemu jest przezroczysty, pozostawiając nadal widoczną wartość przycisku.

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

Po kliknięciu nadal pozostawia cień obramowania.

Aby pozbyć się konturu po kliknięciu, dodaj outline:none

Przykład 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>

Rozwiązanie jest właściwie całkiem proste:

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

Robi to w stylu inline. Definiujesz obramowanie jako 1 piksel, ciągłą linię i kolor czarny. Kolor tła jest wtedy ustawiony na przezroczysty.

AKTUALIZACJA

Wygląda na to, że twoje RZECZYWISTE pytanie brzmi, jak zapobiec obramowaniu po kliknięciu na nią. Które mogą być rozwiązane za pomocą selektora pseudo CSS :active.

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

JSFiddle Demo

Utwórz element div i użyj swojego obrazu (png z przezroczystym tłem) jako tła elementu div, a następnie możesz zastosować dowolny tekst w tym elemencie div, aby najechać kursorem na przycisk. Coś takiego:

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

Ustawienie braku obrazu tła również działa:

button {
    background-image: none;
}

** dodaj ikonę górnego przycisku w ten sposób **

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