투명한 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, 실선 및 검정색으로 정의합니다. 그런 다음 배경색이 투명으로 설정됩니다.

최신 정보

실제 질문은 테두리를 클릭 한 후 어떻게 방지합니까? 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>