Wie erstelle ich eine transparente HTML-Schaltfläche?

Ich verwende Dreamweaver, um eine Website zu erstellen, und ich dachte daran, nur Photoshop zum Erstellen von Hintergründen zu verwenden. Ich habe mich nur dafür entschieden, weil ich, falls ich den Schaltflächennamen einfach durch Bearbeiten der Codes ändern möchte, einfach auf den Code verweisen kann. Wenn ich Schaltflächen mit Photoshop erstellen würde, könnte ich die Texte in diesen Schaltflächen oder in keinem Element einfach bearbeiten.

Meine Frage ist also einfach: Wie erstelle ich eine Schaltfläche mit einem einfachen Inline-Stil, der transparent ist und den Wert der Schaltfläche weiterhin sichtbar lässt?

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

Es hinterlässt nach dem Klicken immer noch einen Randschatten.

Fügen Sie hinzu, um die Gliederung beim Klicken zu entfernen outline:none

jsFiddle Beispiel

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>

Die Lösung ist eigentlich ziemlich einfach:

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

Dies ist ein Inline-Stil. Sie definieren den Rand als 1 Pixel, durchgezogene Linie und schwarz. Die Hintergrundfarbe wird dann auf transparent gesetzt.

AKTUALISIEREN

Ihre IST-Frage scheint zu sein, wie Sie den Rand verhindern können, nachdem Sie darauf geklickt haben. Das kann mit einem CSS-Pseudo-Selektor gelöst werden : :active.

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

JSFiddle Demo

Erstellen Sie ein Div und verwenden Sie Ihr Bild (PNG mit transparentem Hintergrund) als Hintergrund für das Div. Anschließend können Sie einen beliebigen Text in diesem Div anwenden, um den Mauszeiger über die Schaltfläche zu bewegen. Etwas wie das:

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

Das Setzen des Hintergrundbilds auf "Keine" funktioniert auch:

button {
    background-image: none;
}

** füge das Symbol oben wie folgt hinzu **

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