如何制作透明的 HTML 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22672368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a transparent HTML button?
提问by Shinji
I am using dreamweaver to create a website and I thought of just using Photoshop to create backgrounds. I decided to do so only because in case I'd choose to change the button name easily by just editing the codes, I could just refer to the code. If I would construct buttons using Photoshop, I wouldn't be able to edit the Texts in those buttons or in any element easily.
我正在使用 Dreamweaver 创建一个网站，我想只使用 Photoshop 来创建背景。我决定这样做只是因为如果我选择通过编辑代码轻松更改按钮名称，我可以参考代码。如果我使用 Photoshop 构建按钮，我将无法轻松编辑这些按钮或任何元素中的文本。
So my question is simple, How do I create a button that has a simple inline style making it transparent leaving the value of the button still visible.
所以我的问题很简单，如何创建一个具有简单内联样式的按钮，使其透明，而按钮的值仍然可见。
.button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
}
It still leaves a border shade after your click it.
单击它后，它仍然会留下边框阴影。
回答by j08691
To get rid of the outline when clicking, add outline:none
要在单击时去掉轮廓，请添加 outline:none
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>回答by EnigmaRM
The solution is pretty easy actually:
解决方案实际上很简单：
<button style="border:1px solid black; background-color: transparent;">Test</button>
This is doing an inline style. You're defining the border to be 1px, solid line, and black in color. The background color is then set to transparent.
这是在做内联样式。您将边框定义为 1px、实线和黑色。然后将背景颜色设置为透明。
UPDATE
更新
Seems like your ACTUAL question is how do you prevent the border after clicking on it. That can be resolved with a CSS pseudo selector: :active.
似乎您的实际问题是单击后如何防止边框。这可以用CSS伪选择器来解决：:active。
button {
border: none;
background-color: transparent;
outline: none;
}
button:focus {
border: none;
}
回答by Gary Hayes
Make a div and use your image ( png with transparent background ) as the background of the div, then you can apply any text within that div to hover over the button. Something like this:
制作一个 div 并使用您的图像（带有透明背景的 png）作为 div 的背景，然后您可以应用该 div 中的任何文本以将鼠标悬停在按钮上。像这样的东西：
<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>
CSS:
CSS：
.button {
height:20px;
width:40px;
background: url("yourimage.png");
}
回答by user3917930
<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;
}
回答by vivoconunxino
Setting its background image to none also works:
将其背景图像设置为 none 也有效：
button {
background-image: none;
}
回答by Omar bakhsh
**add the icon top button like this **
**像这样添加图标顶部按钮**
#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>