如何制作透明的HTML按钮？

Question

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

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

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

点击后它仍会留下边框阴影.

Answer 1

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

解决方案实际上很简单：

<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 演示