如何制作一个透明的HTMLbutton？

我正在使用Dreamweaver来创build一个网站，我想只是使用Photoshop来创build背景。 我决定这样做只是因为如果我只是通过编辑代码来轻松地改变button名称，我可以参考代码。 如果我使用Photoshop构buildbutton，我将无法轻松编辑这些button或任何元素中的文本。

所以我的问题很简单，我如何创build一个简单的内联样式的button，使其透明，使button的值仍然可见。

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

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

Answer 1

点击时删除outline:none ，添加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> 

Answer 2

创build一个div，并使用你的图像（PNG的透明背景）作为div的背景，然后你可以应用该div内的任何文本hover在button上。 像这样的东西：

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

CSS：

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

Answer 3

实际上这个解决scheme非常简单：

 <button style="border:1px solid black; background-color: transparent;">Test</button> 

这是做一个内联样式。 您将边框定义为1px，实线和黑色。 背景颜色然后设置为透明。

---

UPDATE

看起来像你的实际问题是你如何防止点击后的边界。 这可以用一个CSS伪select符:active来解决。

 button { border: none; background-color: transparent; outline: none; } button:focus { border: none; } 

JSFiddle演示

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

将其背景图像设置为none也适用：

 button { background-image: none; }