Как сделать прозрачную кнопку HTML?

Я использую Dreamweaver для создания веб-сайта, и я подумал о том, чтобы просто использовать 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>

Это встроенный стиль. Вы определяете границу 1 пиксель, сплошную линию и черный цвет. Затем устанавливается прозрачный цвет фона.

ОБНОВИТЬ

Похоже, ваш АКТУАЛЬНЫЙ вопрос заключается в том, как предотвратить границу после нажатия на нее. Это может быть решена с селектором псевдо 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;    
}

Установка его фонового изображения на none также работает:

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>