Bagaimana cara membuat tombol HTML transparan?

Saya menggunakan dreamweaver untuk membuat situs web dan saya berpikir untuk hanya menggunakan Photoshop untuk membuat latar belakang. Saya memutuskan untuk melakukannya hanya karena seandainya saya memilih untuk mengubah nama tombol dengan mudah hanya dengan mengedit kode, saya bisa merujuk ke kodenya. Jika saya akan membuat tombol menggunakan Photoshop, saya tidak akan dapat mengedit Teks di tombol atau elemen apa pun dengan mudah.

Jadi pertanyaan saya sederhana, Bagaimana cara membuat tombol yang memiliki gaya sebaris sederhana sehingga transparan sehingga nilai tombol tetap terlihat.

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

Itu masih meninggalkan bayangan perbatasan setelah Anda mengkliknya.

Untuk menghilangkan garis luar saat mengklik, tambahkan outline:none

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

Solusinya sebenarnya cukup mudah:

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

Ini melakukan gaya sebaris. Anda mendefinisikan perbatasan menjadi 1px, garis solid, dan berwarna hitam. Warna latar belakang kemudian disetel menjadi transparan.

MEMPERBARUI

Sepertinya pertanyaan SEBENARNYA Anda adalah bagaimana Anda mencegah perbatasan setelah mengkliknya. Yang dapat diselesaikan dengan pemilih semu CSS: :active.

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

Demo JSFiddle

Buat div dan gunakan gambar Anda (png dengan latar belakang transparan) sebagai latar belakang div, lalu Anda dapat menerapkan teks apa pun di dalam div tersebut untuk mengarahkan kursor ke tombol. Sesuatu seperti ini:

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

Menyetel gambar latar belakangnya menjadi tidak ada juga berfungsi:

button {
    background-image: none;
}

** tambahkan ikon tombol atas seperti ini **

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