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

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

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

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

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

478804 次浏览
小开
最佳答案

要在单击时去除轮廓，请添加 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>


提交答案