Làm thế nào để tạo một nút HTML trong suốt?

Tôi đang sử dụng dreamweaver để tạo một trang web và tôi đã nghĩ đến việc chỉ sử dụng Photoshop để tạo nền. Tôi quyết định làm như vậy chỉ vì trong trường hợp tôi muốn thay đổi tên nút dễ dàng bằng cách chỉ chỉnh sửa mã, tôi chỉ có thể tham khảo mã. Nếu tôi tạo các nút bằng Photoshop, tôi sẽ không thể dễ dàng chỉnh sửa Văn bản trong các nút đó hoặc trong bất kỳ phần tử nào.

Vì vậy, câu hỏi của tôi rất đơn giản, Làm cách nào để tạo một nút có kiểu nội tuyến đơn giản, làm cho nó trong suốt để lại giá trị của nút vẫn hiển thị.

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

Nó vẫn để lại bóng viền sau khi bạn nhấp vào nó.

Để thoát khỏi đường viền khi nhấp, hãy thêm outline:none

ví dụ 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>

Giải pháp thực sự khá dễ dàng:

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

Đây là một phong cách nội tuyến. Bạn đang xác định đường viền là 1px, đường liền nét và có màu đen. Màu nền sau đó được đặt thành trong suốt.

CẬP NHẬT

Có vẻ như câu hỏi THỰC TẾ của bạn là làm cách nào để ngăn đường viền sau khi nhấp vào nó. Điều đó có thể được giải quyết với một selector giả CSS: :active.

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

JSFiddle Demo

Tạo một div và sử dụng hình ảnh của bạn (png với nền trong suốt) làm nền của div, sau đó bạn có thể áp dụng bất kỳ văn bản nào trong div đó để di chuột qua nút. Một cái gì đó như thế này:

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

Đặt hình nền của nó thành không cũng hoạt động:

button {
    background-image: none;
}

** thêm nút trên cùng biểu tượng như thế này **

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