如何制作一个透明的 HTML 按钮？

Question

我正在使用 Dreamweaver 创建网站，我想只使用 Photoshop 创建背景。我决定这样做只是因为如果我选择通过编辑代码轻松更改按钮名称，我可以参考代码。如果我使用 Photoshop 构建按钮，我将无法轻松编辑这些按钮或任何元素中的文本。

所以我的问题很简单，我如何创建一个具有简单内联样式的按钮，使其透明而使按钮的值仍然可见。

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

点击后仍然会留下边框阴影。

Answer 1

点击时去掉轮廓，添加outline:none

JSFiddle example

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>

Answer 2

**像这样添加图标顶部按钮**

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

Answer 3

将其背景图像设置为无也可以：

button {
    background-image: none;
}

Answer 4

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

Answer 5

解决方案其实很简单：

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

Answer 6

制作一个 div 并使用您的图像（具有透明背景的 png）作为 div 的背景，然后您可以应用该 div 中的任何文本以将鼠标悬停在按钮上。像这样的：

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

CSS：

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}