วิธีสร้างปุ่ม 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>

นี่เป็นการทำแบบอินไลน์ คุณกำลังกำหนดเส้นขอบเป็น 1px เส้นทึบและเป็นสีดำ จากนั้นสีพื้นหลังจะถูกกำหนดเป็นโปร่งใส

UPDATE

ดูเหมือนว่าคำถามจริงของคุณคือคุณจะป้องกันเส้นขอบได้อย่างไรหลังจากคลิกที่มัน ที่สามารถแก้ไขได้ด้วยการเลือก 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>