Şeffaf bir HTML düğmesi nasıl yapılır?

Bir web sitesi oluşturmak için dreamweaver kullanıyorum ve sadece arka planlar oluşturmak için Photoshop kullanmayı düşündüm. Bunu yapmaya karar verdim çünkü düğme adını sadece kodları düzenleyerek kolayca değiştirmeyi seçersem, sadece koda başvurabilirdim. Photoshop kullanarak düğmeler oluştursaydım, bu düğmelerdeki veya herhangi bir öğedeki Metinleri kolayca düzenleyemezdim.

Öyleyse sorum basit: Basit bir satır içi stiline sahip bir düğmeyi şeffaf hale getirerek düğmenin değerini hala görünür halde bırakarak nasıl oluşturabilirim?

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

Tıkladıktan sonra yine de bir kenarlık gölgesi bırakır.

Tıklarken anahattan kurtulmak için outline:none

jsFiddle örneği

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>

Çözüm aslında oldukça kolay:

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

Bu bir satır içi stil yapıyor. Kenarlığı 1px, düz çizgi ve siyah renkli olarak tanımlıyorsunuz. Arka plan rengi daha sonra şeffaf olarak ayarlanır.

GÜNCELLEME

Görünüşe göre GERÇEK sorunuz, üzerine tıkladıktan sonra sınırı nasıl engelleyeceğinizdir. Bu bir CSS sözde seçici ile çözülebilir: :active.

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

JSFiddle Demo

Bir div oluşturun ve resminizi (şeffaf arka plana sahip png) div'in arka planı olarak kullanın, ardından bu div içindeki herhangi bir metni düğmenin üzerine getirmek için uygulayabilirsiniz. Bunun gibi bir şey:

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

Arka plan resmini yok olarak ayarlamak da işe yarar:

button {
    background-image: none;
}

** bunun gibi simgenin üst düğmesini ekleyin **

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