Як зробити прозору кнопку 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>

Це робиться в стилі inline. Ви визначаєте, що межа має 1 px, суцільну лінію та чорний колір. Потім колір фону встановлюється прозорим.

ОНОВЛЕННЯ

Здається, що ВАШЕ ЗАПИТАННЯ - це як запобігти межі після натискання на неї. Це може бути вирішена з селектором псевдо CSS: :active.

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

Демонстрація JSFiddle

Створіть div і використовуйте своє зображення (png з прозорим фоном) як фон 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>