透明なHTMLボタンを作るには？

私はdreamweaverを使用してWebサイトを作成しており、Photoshopを使用して背景を作成することを考えています。コードを編集するだけでボタン名を簡単に変更できるようにしたい場合にのみ、コードを参照できるため、そうすることにしました。Photoshopを使用してボタンを作成すると、それらのボタンや要素のテキストを簡単に編集できなくなります。

したがって、私の質問は簡単です。ボタンの値を表示したまま、透明にする単純なインラインスタイルのボタンを作成するにはどうすればよいですか。

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

クリックした後も境界線が残ります。

クリック時にアウトラインを取り除くには、追加します outline:none

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>

解決策は実際にはかなり簡単です：

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

これはインラインスタイルです。境界線を1px、実線、黒に定義しています。その後、背景色が透明に設定されます。

更新

あなたの実際の質問は、それをクリックした後、どのように国境を防ぐのですか？これは、CSS疑似セレクターで解決できます:active。

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

JSFiddleデモ

divを作成し、画像（透明な背景のpng）をdivの背景として使用します。その後、そのdiv内の任意のテキストを適用して、ボタンの上にホバーします。このようなもの：

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

背景画像をなしに設定しても機能します。

button {
    background-image: none;
}

**このようにアイコン上部ボタンを追加します**

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