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

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.

点击后，它仍然会留下一个边框阴影。

5 个解决方案

#1

155

To get rid of the outline when clicking, add outline:none

要在单击时删除大纲，请添加outline:none

jsFiddle example

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>

#2

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:

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

#3

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

JSFiddle Demo

JSFiddle演示

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

#5

Setting its background image to none also works:

将背景图像设置为none也可以:

button {
    background-image: none;
}

#1

155